箭头函数是 ES6 新增的语法特性之一，它可以让我们更加简洁地编写函数。但是，如果不注意使用方法，就会遇到一些问题。本文将介绍在 ES6 中如何正确地使用箭头函数，并提供一些示例代码。
什么是箭头函数？
箭头函数是一种更加简洁的函数语法，它使用箭头（=>）来定义函数。箭头函数可以省略函数关键字 function 和 return，以及花括号和 return 关键字。例如：
// 传统函数
function add(x, y) {
return x + y;
}
// 箭头函数
const add = (x, y) => x + y;箭头函数的注意事项
1. 箭头函数的 this 指向
箭头函数的 this 指向定义时所在的作用域，而不是调用时所在的作用域。这与传统函数的 this 指向不同。
例如，传统函数中的 this 指向调用该函数的对象：
const obj = {
name: "Alice",
sayName() {
console.log(this.name);
}
};
obj.sayName(); // 输出 "Alice"而在箭头函数中，this 指向定义时的作用域，与调用时的作用域无关：
const obj = {
name: "Alice",
sayName: () => {
console.log(this.name);
}
};
obj.sayName(); // 输出 undefined因此，如果需要使用 this 指向调用时的对象，应该使用传统函数而不是箭头函数。
2. 箭头函数不能作为构造函数使用
箭头函数没有自己的 this，也不能使用 new 关键字来创建对象。如果试图使用 new 关键字来调用箭头函数，会抛出错误。
const Person = (name, age) => {
this.name = name;
this.age = age;
};
const alice = new Person("Alice", 18); // 抛出错误因此，如果需要定义可以使用 new 关键字创建的对象，应该使用传统函数而不是箭头函数。
如何正确地使用箭头函数
1. 简单的函数体
对于简单的函数体，可以使用箭头函数来简化代码。例如：
// 传统函数
function double(x) {
return x * 2;
}
// 箭头函数
const double = x => x * 2;2. 函数作为参数
当函数作为参数传递时，可以使用箭头函数来简化代码。例如：
// 传统函数
[1, 2, 3].map(function(x) {
return x * 2;
});
// 箭头函数
[1, 2, 3].map(x => x * 2);3. 保留 this 指向
如果需要在函数内部使用 this 指向调用时的对象，应该使用传统函数而不是箭头函数。例如：
// javascriptcn.com 代码示例
const obj = {
name: "Alice",
sayName() {
console.log(this.name);
},
sayNameLater() {
setTimeout(function() {
console.log(this.name);
}, 1000);
}
};
obj.sayName(); // 输出 "Alice"
obj.sayNameLater(); // 输出 undefined在 sayNameLater 函数中，setTimeout 内部的函数使用了传统函数，因为需要在函数内部使用 this 指向调用时的对象。
总结
箭头函数是一种更加简洁的函数语法，可以让我们更加方便地编写函数。但是，如果不注意使用方法，就会遇到一些问题。在使用箭头函数时，需要注意它的 this 指向和不能作为构造函数使用的限制。如果需要使用 this 指向调用时的对象或创建可以使用 new 关键字的对象，应该使用传统函数而不是箭头函数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655090d77d4982a6eb95de70