在日常前端开发中，我们经常需要使用 JavaScript 编写函数。在函数中，this 指向是一个无法避免的问题。又因为 JavaScript 中的 this 指向比较复杂，容易产生问题。而 ES6 中增加的箭头函数则较好地解决了这个问题。本文将详细介绍 ES6 箭头函数的 this 指向。
this 的指向
JavaScript 中的 this 指向根据当前所处的执行环境来确定。在浏览器中，全局执行环境指向 window 对象，函数执行环境指向调用该函数的对象。但是，使用嵌套函数、闭包或者对象方法等情况下，this 的指向会变得异常复杂。
在 ES6 箭头函数中，this 指向箭头函数定义时所在的执行上下文。因此，在使用箭头函数时，this 的指向不再受到函数执行环境的影响，而是与箭头函数定义时的上下文绑定。这种静态的绑定方式，对于编写简洁、易于维护的代码是非常有益的。
箭头函数的示例
让我们看一下基于上面这些理论知识的示例代码：
// javascriptcn.com 代码示例
var person = {
name: "Tom",
sayName: function() {
console.log(this.name);
},
sayNameArrow: () => {
console.log(this.name);
}
};
person.sayName(); // "Tom"
person.sayNameArrow(); // undefined在上面的代码中，我们定义了一个 person 对象，其中包括 sayName 方法和 sayNameArrow 箭头函数。当我们调用 person.sayName() 时，函数内部的 this 指向 person 对象，因此我们可以正确地获取 person 对象上的 name 属性。
而当我们调用 person.sayNameArrow() 时，函数内部将 this 指向外部的执行上下文。由于 person.sayNameArrow 是在全局上下文中定义的，this 指向全局执行环境（也就是 window）。因此我们无法获取 name 属性，输出结果为 undefined。
箭头函数的适用场景
在以上示例中，我们可以发现箭头函数的 this 指向并不适用于所有的场景。那么，什么时候应该使用箭头函数呢？
- 特别适合包含简单表达式的唯一函数。
箭头函数的特点是代码简洁，适合处理简单表达式。如果你需要定义一个仅包含一行代码的函数，那就使用箭头函数吧，例如：
const add = (a, b) => a + b;
- 作为对象方法的箭头函数
如果你需要使用箭头函数定义一个对象方法，可以保证 this 指向的正确性。如下示例代码：
const person = {
name: "Tom",
sayName: () => {
console.log(this.name); // Tom
}
};
person.sayName(); 在上面的示例中，我们使用箭头函数定义了 person 对象的 sayName 方法，此时 this 指向 person 对象。在此情况下，我们可以放心使用箭头函数。
总之，箭头函数和传统函数各有优缺点。了解这些细节可以帮助我们编写更优秀的 JavaScript 代码。
总结
在本文中，我们详细介绍了 ES6 箭头函数的 this 指向。我们讨论了 this 的指向问题，同时通过示例代码向读者展示了箭头函数的一些适用场景。同时，我们也需要注意的是，在某些情况下箭头函数并不适合使用，因此需要根据具体情况进行选择。希望这篇文章对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653905397d4982a6eb23a863