箭头函数
特点:比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。
适用于:那些本来需要匿名函数的地方,并且它不能用作构造函数
注意:
- 箭头函数不能用作构造器,和 new一起用会抛出错误。
- 箭头函数没有prototype属性。为undefined
- yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器。
参数
不传参数
没有参数的函数应该写成一对圆括号,() => { statements }
//函数普通写法
funtion foo()
{
console.log("函数普通写法");
}
//没有参数的函数应该写成一对圆括号
let fun =()=>console.log("箭头函数_不传参数");
fun();
只传入一个参数
当只有一个参数时,圆括号是可选的
(singleParam) => { statements } 或者 singleParam => { statements }
let fun1=(a)=>console.log(`箭头函数传入一个参数,值为:${a}`);
//可以省略()
let fun2= a =>console.log(`箭头函数传入一个参数,值为:${a}`);
fun1("1");
fun2("2");
传入两个及两个以上的参数
(param1, param2, …, paramN) => { statements }
let fun3=(a,b)=>console.log(`箭头函数两个及两个以上的形参,值为:${a}和${b}`);
fun3("a","b");
支持默认参数、剩余参数及参数的解构
ES6中默认参数和剩余参数的注意事项 : https://blog.csdn.net/liuli_a/article/details/104679155
默认参数
(param = defaultValue) => { statements }
let fun4=(param1=100)=>console.log(param1);
//100
console.log(fun4());
剩余参数
(param1, param2, …rest) => { statements }
let fun5=(param1,param2,param3,...params)=>{
console.log(param1);
console.log(param2);
console.log(param3);
console.log(params);
}
//1
//2
//3
//[4,5,6,7,8,9]
fun5(1,2,3,4,5,6,7,8,9);
参数的解构
( [a,b] = [1,2] ) => a+b
let fun6=([num1,num2]=[1,9],[num3]=[num1+num2])=>num1+num2+num3;
//20
console.log(fun6());
函数体
函数体只有一条语句或者是表达式的时候 可以省略 { } ,当省略 { } 时,会自动返回语句执行结果或是表达式结果
箭头函数的简写
//省略{}
let fun7=(x,y)=>x+y;
//3
console.log(fun7(1,2));
函数体不止一条语句时, { } 不可以省略
箭头函数的常规写法
//{ } 不可以省略
let fun8=(x,y)=>{
x=x.toString();
y=y.toString();
return x+y;
}
console.log(fun8(1,5)); //15
在一个简写体中,只需要一个表达式,并自动附加一个隐式的返回值。在常规写法中,必须使用明确的return语句。
箭头函数中的this
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
通过 call() 或 apply() 方法调用一个函数时,只能传递参数
var adder = {
base : 1,
add : function(a) {
var f = v => v + this.base;
return f(a);
},
addThruCall: function(a) {
var f = v => v + this.base;
var b = {
base : 2
};
//由于箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数
return f.call(b, a);
}
};
console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2
箭头函数内定义的变量及其作用域
- 参数括号内定义的变量是局部变量
- 函数体内 { } 不使用var定义的变量是全局变量
- 函数体内{} 用var定义的变量是局部变量
其他
箭头函数在参数和箭头之间不能换行。
var func = ()
=> 1;
//SyntaxError: expected expression, got '=>'
但是,可以通过在 ‘=>’ 之后换行,或者用 ‘( )’、’{ }'来实现换行
var func = (a, b, c) =>
1;
var func = (a, b, c) => (
1
);
var func = (a, b, c) => {
return 1
};