但是,以下代码可以正常工作:
let multiply = (x,y) =>
x * y;
JavaScript 允许我们在参数之间使用换行符,如下例所示:
let multiply = (
x,
y
) =>
x * y;
箭头函数体中的语句和表达式
在 JavaScript 中,表达式的计算结果如下例所示。
10 + 20;
语句执行特定任务,例如:
if (x === y) {
console.log('x equals y');
}
如果在箭头函数的主体中使用表达式,则不需要使用花括号。
let square = x => x * x;
但是,如果使用语句,则必须将其包裹在一对花括号中,如下例所示:
let except = msg => {
throw msg;
};
JavaScript 箭头函数和对象字面量
考虑以下示例:
let setColor = function (color) {
return {value: color}
};
let backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"
setColor() 函数表达式返回一个将 value 属性设置为 color 参数的对象。
如果使用以下语法从箭头函数返回对象字面量,则会出现错误。
p => {object:literal}
例如,以下代码会导致错误。
let setColor = color => {value: color };
由于块字面量和对象字面量都使用大括号,因此 JavaScript 引擎无法区分块和对象。
要解决此问题,需要将对象字面量括在括号中,如下所示:
let setColor = color => ({value: color });
箭头函数对比常规功能
箭头函数和常规函数之间有两个主要区别。
首先,在箭头函数中,this、arguments、super、new.target 是词法的。这意味着箭头函数使用封闭词法范围中的这些变量(或构造)。
其次,箭头函数不能用作函数构造函数,如果你使用 new 关键字从箭头函数创建一个新对象,你会得到一个错误。
JavaScript 箭头函数和 this 值
在 JavaScript 中,一个新函数定义了它自己的 this 值。但是,箭头函数并非如此。请参见以下示例:
function Car() {
this.speed = 0;
this.speedUp = function (speed) {
this.speed = speed;
setTimeout(function () {
console.log(this.speed); // undefined
}, 1000);
};
}
let car = new Car();
car.speedUp(50);
在 setTimeout() 函数的匿名函数内部, this.speed 是未定义的。原因是匿名函数的 this 隐藏了 speedUp() 方法的 this。
要解决此问题,请将 this 值分配给不会在匿名函数内隐藏的变量,如下所示:
function Car() {
this.speed = 0;
this.speedUp = function (speed) {
this.speed = speed;
let self = this;
setTimeout(function () {
console.log(self.speed);
}, 1000);
};
}
let car = new Car();
car.speedUp(50); // 50;
与匿名函数不同,箭头函数捕获封闭上下文的 this 值,而不是创建自己的 this 上下文。以下代码应按预期工作:
function Car() {
this.speed = 0;
this.speedUp = function (speed) {
this.speed = speed;
setTimeout(
() => console.log(this.speed),
1000);
};
}
let car = new Car();
car.speedUp(50); // 50;
JavaScript 箭头函数和参数对象
箭头函数没有 arguments 对象。例如:
function show() {
return x => x + arguments[0];
}
let display = show(10, 20);
let result = display(5);
console.log(result); // 15
showMe() 函数内的箭头函数引用 arguments 对象。然而,这个 arguments 对象属于 show() 函数,而不是箭头函数。
此外,箭头函数没有 new.target 关键字。
JavaScript 箭头函数和原型属性
当使用 function 关键字定义函数时,该函数有一个称为原型的属性:
function dump( message ) {
console.log(message);
}
console.log(dump.hasOwnProperty('prototype')); // true
然而,箭头函数没有原型属性:
let dump = message => console.log(message);
console.log(dump.hasOwnProperty('prototype')); // false
将箭头函数用于回调和闭包是一种很好的做法,因为箭头函数的语法更简洁。
总结
-
使用 (...args) => 表达式;定义箭头函数。
-
使用 (...args) => { statements } 定义具有多个语句的箭头函数。
-
箭头函数没有绑定到 this 或 super。
-
箭头函数没有参数对象、new.target 关键字和原型属性。