在 JavaScript 中，this 关键字是一个非常重要的概念。它通常用于引用当前执行代码的对象。但是在某些情况下，this 的值可能会出现一些问题，这就需要使用箭头函数来解决。
ES6 中的箭头函数
ES6 引入了箭头函数，它是一种更简洁的函数定义方式。箭头函数的语法如下：
(param1, param2, …, paramN) => { statements }箭头函数有以下几个特点：
- 箭头函数没有自己的 this，它的 this 是继承自外层作用域的。
- 箭头函数不能使用 arguments 对象，但是可以通过 rest 参数获取所有参数。
- 箭头函数不能使用 new 运算符来创建对象。
- 箭头函数没有 prototype 属性。
ES12 中的箭头函数
在 ES12 中，箭头函数的 this 绑定规则发生了变化。ES12 引入了一个新的语法 ::，它用来绑定函数的 this。语法如下：
obj::func
上面的语法相当于下面的语法：
func.bind(obj)
这样，箭头函数就可以使用 :: 语法来绑定 this 了。例如：
-- -------------------- ---- -------
----- --- - -
----- ------
---------- -
------ -- -- -
------------------- ----------------
--
--
--
----- ----- - ----------------
-------- -- ------ ----上面的代码中，sayHello 返回了一个箭头函数，这个箭头函数的 this 是继承自 obj 的。使用 :: 语法可以直接将 sayHello 绑定到 obj 上，这样箭头函数的 this 就可以正确地指向 obj 了。
箭头函数与 this 的应用场景
箭头函数与 this 的绑定规则使得它在某些场景下非常有用。下面是一些常见的应用场景：
在类中使用箭头函数
在类中使用箭头函数可以避免 this 绑定错误的问题。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------ -- -- -
------------------- ----------------
--
-
-
----- ------ - --- --------------
----- ----- - ------------------
-------- -- ------ ----上面的代码中，sayHello 返回了一个箭头函数，这个箭头函数的 this 是继承自 person 的。这样就可以避免 this 绑定错误的问题了。
在 React 中使用箭头函数
在 React 中，使用箭头函数可以避免 this 绑定错误的问题。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----------- - -- -- -
------------------------
--
-------- -
------ ------- -------------------------------- ------------
-
-上面的代码中，handleClick 是一个箭头函数，它的 this 是继承自 MyComponent 的。这样就可以避免 this 绑定错误的问题了。
总结
本文介绍了 ES12 中的箭头函数与 this 的详解。箭头函数的继承自外层作用域的 this 可以避免 this 绑定错误的问题。在类中和 React 中使用箭头函数可以非常方便地避免 this 绑定错误的问题。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6562c0e2d2f5e1655dc8c791