背景
JavaScript 箭头函数是 ES6 中新增加的语法，它简化了函数的声明，使得函数表达式更简洁、语义更清晰。然而，由于老式浏览器不支持 ES6 语法，因此需要通过使用 Babel 进行编译，使得代码能够在低版本的浏览器中运行。
但是，在使用 Babel 进行编译箭头函数时，会存在一些问题，本文将会介绍这些问题及如何解决这些问题。
问题
问题就在于当使用 Babel 编译箭头函数时，箭头函数中的上下文绑定与普通函数中的上下文绑定是不同的。
在 ES6 中，箭头函数有一个内部属性 [[ThisMode]]，它的默认值为 lexical，表示箭头函数的 this 绑定为定义时所在的作用域。而普通函数的默认 [[ThisMode]] 值为 global，即 this 绑定为全局对象。
当 Babel 将箭头函数编译成 ES5 代码时，会把箭头函数的 [[ThisMode]] 属性值修改为普通函数的默认值 global，使得箭头函数中的 this 绑定为全局对象。这与原有 ES6 的语义不同，会导致一些问题。
例如：
const obj = {
name: 'Alice',
getName: () => this.name
}
console.log(obj.getName())上面代码的预期输出是 'Alice'，但是实际输出为 undefined，原因是 this 绑定为全局对象，而全局对象中没有 name 属性。
解决方法
解决这个问题的方法有两个：
1. 使用 Babel 插件
Babel 有一个插件 transform-es2015-arrow-functions，它可以在编译箭头函数时，保留箭头函数的 [[ThisMode]] 属性，使得箭头函数中的 this 绑定为定义时所在的作用域。
安装插件：
npm install --save-dev @babel/plugin-transform-arrow-functions
配置 .babelrc 文件：
{
"plugins": [
"@babel/plugin-transform-arrow-functions"
]
}这样，在编译箭头函数时，就会保留箭头函数的 [[ThisMode]] 属性，使得箭头函数中的 this 绑定为定义时所在的作用域。
2. 使用普通函数
由于普通函数的 [[ThisMode]] 属性值为 global，与在 Babel 中编译箭头函数的行为一致，因此，可以使用普通函数来替代箭头函数，从而避免 Babel 编译时的问题。
例如：
const obj = {
name: 'Alice',
getName: function() {
return this.name
}
}
console.log(obj.getName())上面代码的输出为 'Alice'，可以达到预期的效果。
总结
在使用 Babel 编译箭头函数时，需要注意箭头函数中的 this 绑定与普通函数中的不同，可以通过使用 Babel 插件或普通函数来解决这个问题。正确的处理这个问题，可以使得代码更加清晰、稳定，并且能够更好地适配不同版本的浏览器，提高代码的可移植性和兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492f4a048841e98940bfea4