在 ES6 中，引入了箭头函数（Arrow Function），这种语法糖使得我们能够更加简洁地编写函数。然而，在使用箭头函数时，我们有可能会遇到 "this" 无法指向预期对象的问题。
传统函数中的 "this" 指向
在传统函数中，通过 "this" 关键字可以引用当前函数所属的对象。例如：
const obj = {
name: 'John',
sayName() {
console.log(this.name);
}
};
obj.sayName(); // 输出 "John"在上面的代码中，当调用 obj 对象的 sayName 方法时，“this”关键字就指向了 obj 对象本身。
但是，在 JavaScript 中，函数的执行环境决定了 "this" 的指向，因此，如果不是在对象的方法中调用函数， "this" 可能会指向全局对象或其他对象。
箭头函数中的 "this" 指向
与传统函数不同的是，箭头函数的 "this" 不是根据函数的执行环境来确定的，而是根据定义函数时所处的作用域来确定的。具体来说，在箭头函数中， "this" 是继承自外部作用域的，而不是在函数内部重新定义的。
例如：
const obj = {
name: 'John',
sayName: () => {
console.log(this.name);
}
};
obj.sayName(); // 输出 undefined在上面的代码中，由于箭头函数 sayName 定义时所处的作用域是全局作用域，因此 "this" 的值是全局对象，即浏览器中的 window 对象。由于全局对象没有 name 属性，因此输出 undefined。
如何解决箭头函数中的 "this" 指向问题
如果我们仍然希望在箭头函数中使用 "this" 关键字来引用当前对象，我们可以采用以下方法：
方法一：使用 ES6 类
ES6 中引入了类（Class）的概念，可以使用类的实例方法来代替对象的方法。由于类的实例方法是普通函数，因此可以使用传统函数的 "this" 关键字。
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- - -- -- -
-----------------------
-
-
----- --- - --- ---------------
-------------- -- -- ------在上面的代码中，我们使用了类的实例方法 sayName 来定义对象的方法。由于箭头函数继承自外部作用域，因此在这里，箭头函数的 "this" 关键字指向了类的实例对象 obj。
方法二：使用 bind() 方法
JavaScript 中，每个函数都有一个 bind() 方法，可以将函数的 "this" 关键字绑定到指定对象上。我们可以使用 bind() 方法将箭头函数的 "this" 绑定到当前对象上。
-- -------------------- ---- -------
----- --- - -
----- -------
-------- ---------- -
----- ---- - -- -- -
-----------------------
--
------------------
-
--
-------------- -- -- ------在上面的代码中，我们使用传统函数来定义对象的方法，并在方法内部使用了箭头函数。由于箭头函数的 "this" 指向是继承自外部作用域的，因此我们需要使用 bind() 方法将箭头函数的 "this" 关键字绑定到当前对象上。
结论
在 ES6 中，箭头函数的 "this" 关键字与传统函数有所不同，可能会导致出现一些问题。为了避免这些问题，我们可以
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30222