ES6 的箭头函数是 JavaScript 中一种非常方便的语法，可以大大简化代码的书写，但是在使用箭头函数时，我们会遇到许多 this 指针问题，在这篇文章中，我们将详细探讨这些问题，并提供解决方案。
什么是 this 指针？
在 JavaScript 中，this 是一个非常特殊的关键字，它表示当前执行上下文中的一个对象。一般情况下，this 指向调用函数的对象，但是在某些情况下，它会指向其他对象，甚至是全局对象。
ES6 箭头函数中的 this 指针问题
在 ES6 箭头函数中，this 的值是在函数定义时确定的，而不是在函数执行时确定的。这意味着在箭头函数中使用 this 时，它指向的是外层作用域中的 this，而不是当前函数的 this。
我们来看一下下面的示例代码：
-- -------------------- ---- -------
----- --- - -
----- -----
-------- ---------- -
------ -- -- -
-----------------------
-
-
--
----- ------- - --------------
----------在这个例子中，我们定义了一个对象 obj，它有一个方法 getName，该方法返回一个箭头函数。当我们调用 getName() 时，控制台输出的是 undefined，而不是我们期望的小明。
这是因为在箭头函数中，this 指向的是 obj 的外层作用域，也就是全局对象 window，因此无法访问 obj 的 name 属性。
解决方案：使用 call，apply 或 bind 方法
为了解决 ES6 箭头函数中的 this 指针问题，我们可以使用 JavaScript 中的 call、apply 或 bind 方法，显式地将 this 绑定到所需的对象上。
我们来修改一下上面的示例代码，添加一个 call 方法：
-- -------------------- ---- -------
----- --- - -
----- -----
-------- ---------- -
------ -- -- -
-----------------------
-
-
--
----- ------- - --------------
------------------现在调用 getName() 方法时，控制台输出的就是我们期望的小明。
我们还可以使用 apply 或 bind 方法来达到同样的效果。
解决方案：使用类属性
在 ES6 中，类方法也可以变成类属性，并且不需要使用 function 关键字，而箭头函数在类属性中的使用将会更加的方便：
-- -------------------- ---- -------
----- ------ -
---- - -----
------- - -- -- -
-----------------------
-
-
----- ------ - --- ---------
-----------------这个示例代码定义了一个类 Person，其中有一个属性 getName，它是一个箭头函数。当我们调用 person.getName() 时，控制台输出的是小明。
在使用类属性时，箭头函数的 this 指向的是当前实例对象，因此不需要再手动绑定 this。
结论
在 ES6 中，箭头函数是一个非常方便的语法，但是在使用时，我们要特别注意它的 this 指针问题。使用 call、apply 或 bind 方法或者使用类属性都可以解决这个问题，让我们的代码更加清晰和可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67176223ad1e889fe2214821