语法
ES6 允许使用“箭头”（=>）定义函数，可以简单的认为箭头的左边是函数的参数，箭头的右边是函数的声明（函数体）。
- 具有一个参数的简单函数
// 当只有一个参数时，圆括号是可选的：
// (单一参数) => {函数声明}
// 单一参数 => {函数声明}
var f = v => v;
// 等同于
var f = function (v) {
return v;
};
- 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号
()代表参数部分，多个参数之间用逗号间隔。
// 没有参数的函数应该写成一对圆括号。
// () => {函数声明}
var f = () => 5;
// 等同于
var f = function () { return 5 };
// (参数1, 参数2, …, 参数N) => { 函数声明 }
// (参数1, 参数2, …, 参数N) => 表达式（单一）
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
- 箭头函数的代码块部分多于一条语句，就要使用大括号
{}将它们括起来，并且使用return语句返回。
var add = (a, b) => {
if (typeof a == 'number' && typeof b == 'number') {
return a + b
} else {
return 0
}
}
- 如果箭头函数直接返回一个对象，必须在对象外面加上括号
()，否则会报错。
// 返回对象字面表达式时需给函数体加括号()，否则会报错
// 参数=> ({foo: bar})
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
- 箭头函数支持参数列表解构。
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6
- 支持
rest参数和默认参数。
// (参数1, 参数2, ...rest) => {函数声明}
// (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
let f = (x, y = 1) => x+y;
f(1); // 2
关于rest参数和默认参数，可参考《【ES6】函数默认参数与rest参数》
注意点
-
typeof运算符和普通的function一样。
var f = a => a;
console.log(typeof f); // "function"
- 是
Function的实例，instanceof也返回true。
var f = a => a;
console.log(f instanceof Function); // true
- 箭头函数不会创建自己的
this,它只会从自己的作用域链的上一层继承this，而且在箭头函数中，this的指向是固定的，不能改变。
// 在箭头函数中，`this`属于词法作用域，直接由上下文确定。
//ES5普通函数
function Man(){
this.age=22;
return function(){
this.age+1;
}
}
var cala=new Man();
console.log(cala())//undefined
//ES6箭头函数
function Man(){
this.age=22;
return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23
- 不存在
arguments对象。如果要用，可以用rest参数代替。
//没有arguments
var foo = (a,b) => {return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined
- 不可以当作构造函数，也就是说，不可以使用
new命令，否则会抛出一个错误。
//不能使用new 关键字
var Obj = () => {"hello world"};
var o = new Obj();
// TypeError: Obj is not a constructor
- 箭头函数没有原型。
//没有原型
var Obj = () => {};
console.log(Obj.prototype);
// undefined
- 不可以使用
yield命令，因此箭头函数不能用作Generator函数。 - 箭头函数在参数和箭头之间不能换行。
var func = ()
=> 1;
// SyntaxError: expected expression, got '=>'
- 箭头函数具有与常规函数不同的特殊运算符优先级解析规则。
let callback;
callback = callback || function() {}; // ok
callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments
callback = callback || (() => {}); // ok
参考文章
- ECMAScript 6 入门 - 函数的扩展
- 箭头函数 - JavaScript | MDN