ES6 的箭头函数在语法上简明易懂，但在对 this 绑定上却有很多需要注意的地方。本文将会介绍箭头函数的 this 绑定问题以及在使用 Babel 编译 ES6 代码时应如何处理。
什么是箭头函数？
箭头函数是 ES6 中的新特性，它允许我们使用更短的语法来创建函数。箭头函数中的 this 绑定是静态的，即它指向函数在定义时所在的上下文，而不是执行时所在的上下文。
箭头函数的基本语法如下：
const fn = (arg1, arg2, ...) => {
// 函数体
};如果只有一个参数，可以不加括号：
const fn = arg1 => {
// 函数体
};如果函数体中只有一行语句，可以省略花括号和 return：
const fn = (arg1, arg2, ...) => 表达式;
箭头函数中的 this 绑定问题
在 ES5 中，this 的指向是动态的，它取决于函数的调用方式。但是，在箭头函数中，this 的指向是静态的，它与函数所在的上下文有关，而不是调用方式。
在箭头函数中，this 的值由外层作用域决定，而不是函数本身。例如，以下代码：
const obj = {
count: 0,
fn: () => {
this.count += 1;
}
}在 obj.fn() 中，箭头函数不会创建新的作用域，所以 this 指向了全局上下文，而不是 obj 对象。
使用 Babel 编译 ES6 代码时应如何处理？
使用 Babel 编译 ES6 代码时，需要注意的是箭头函数的 this 绑定问题。为了保持 ES6 中的 this 绑定规则，我们需要使用 babel-plugin-transform-arrow-functions 插件。
- 安装插件
在使用插件之前，我们需要先安装它。可以使用以下命令：
npm install --save-dev babel-plugin-transform-arrow-functions
- 在 babel 配置文件中配置插件
在 .babelrc 文件中配置插件：
{
"plugins": ["transform-arrow-functions"]
}或者，在 package.json 文件中配置插件：
{
"name": "my-project",
"version": "1.0.0",
"babel": {
"plugins": ["transform-arrow-functions"]
}
}- 编译代码
现在，我们可以使用以下命令来编译我们的 ES6 代码：
npx babel input.js -o output.js
示例代码
以下是一个简单的示例，它演示了在使用 babel-plugin-transform-arrow-functions 插件编译 ES6 代码时，如何处理箭头函数中的 this 绑定。
// javascriptcn.com 代码示例
class MyClass {
constructor() {
this.count = 0;
}
handleClick = () => {
this.count += 1;
console.log(this.count);
}
}
const myObj = new MyClass();
document.getElementById('button').addEventListener('click', myObj.handleClick);在上面的代码中，我们定义了一个类 MyClass，并在它的构造函数中初始化了 count 变量。我们还定义了一个箭头函数 handleClick，用于处理按钮的点击事件。
使用箭头函数 handleClick，我们可以确保在按钮被点击时，this 始终指向 MyClass 类的实例。这是因为，箭头函数 handleClick 中的 this 指向的是类的实例，而不是全局上下文。
为了使用这个箭头函数，我们需要在类中将它声明为一个实例属性。这可以通过在箭头函数前面加上等号来完成：handleClick = () => {...}。
然后，我们在全局上下文中创建了一个 MyClass 的实例，并添加了一个事件监听器来处理按钮的点击事件。当按钮被点击时，箭头函数 handleClick 将被调用，并将 count 变量的值增加 1。
总结
在 ES6 中，箭头函数单一的语法和固定的 this 绑定规则使其成为开发者的首选。在使用 Babel 编译器编译 ES6 代码时，我们需要使用 babel-plugin-transform-arrow-functions 插件来保持箭头函数中的 this 绑定规则。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654ba9c17d4982a6eb56da66