在 ECMAScript 2015 中，推出了箭头函数，这是一种新的函数定义方式，它弥补了传统函数的一些缺陷，例如：不需要使用 function 关键字，不需要写大括号，不需要使用 return 关键字等等。但是，箭头函数也存在一个严重的问题，那就是它的 this 指向。
传统函数的 this 指向问题
在传统函数中，this 是非常重要的一个概念，它指向的是当前函数调用的上下文对象。例如：
--- ------ - -
----- -----
--------- ---------- -
------------------- -- ---- -- - - -----------
-
--
------------------ -- --------- -- ---- -- --在上面的代码中，this 指向的是 person 对象，因此调用该方法时，可以正确输出张三的名字。
但是，this 指向往往会引发一些难以理解的问题。例如：
--- ------ - --------------------------------- -------------------------------- ---------- - ------------------ -- ---------------- ------------ ---
在上面的代码中，this 指向的是触发事件的元素，也就是 button 按钮。这样的结果可能并不是我们所期望的，因为我们往往希望 this 指向的是当前对象，而不是触发事件的元素。
箭头函数的 this 指向问题
在箭头函数中，this 的指向与传统函数有所不同。例如：
--- ------ - -
----- -----
--------- -- -- -
------------------- -- ---- -- - - -----------
-
--
------------------ -- --------- -- ---- -- ---------在上面的代码中，箭头函数中的 this 指向的是父级作用域中的 this 对象，也就是全局作用域中的 this，因此输出的结果是 undefined。
这是因为箭头函数没有自己的 this，而是继承了父级作用域中的 this。这无疑给开发带来了一些麻烦，但是也可以通过一些技巧来解决这个问题。
解决箭头函数的 this 指向问题
解决箭头函数的 this 指向问题，有几种常见的方法，包括使用 ES6 的新语法、使用 bind 方法、使用上下文对象等。
使用 ES6 的新语法
在 ES6 中，可以使用 let 和 const 关键字来声明变量，这样就可以避免使用传统的 var 关键字，从而避免 this 指向的问题。例如：
--- ------ - -
----- -----
---------- -
------------------- -- ---- -- - - -----------
-
--
------------------ -- --------- -- ---- -- --在上面的代码中，使用了 let 和 const 关键字来声明变量，这样就可以正确地使用 this 指向 person 对象。
使用 bind 方法
使用 bind 方法可以将函数绑定到指定的 this 上下文中。例如：
--- ------ - -
----- -----
---------- -
------------------- -- ---- -- - - -----------
-
--
--- -------- - -----------------------------
----------- -- --------- -- ---- -- --在上面的代码中，使用了 bind 方法将 sayHello 函数绑定到 person 对象上下文中，从而可以正确地使用 this 指向 person 对象。
使用上下文对象
使用上下文对象也可以解决箭头函数的 this 指向问题。例如：
--- ------ - -
----- -----
--------- ---------- -
--- ---- - -----
--- ----- - ---------- -
------------------- -- ---- -- - - -----------
--
--------
-
--
------------------ -- --------- -- ---- -- --在上面的代码中，使用了一个变量 self 来存储 this 对象，然后在内部函数中使用 self 来指向 person 对象。
总结
以上我们介绍了如何解决使用 ECMAScript 2015 箭头函数的 this 指向问题。通过学习这些方法，我们可以更好地使用箭头函数，从而提高代码的可读性和可维护性。
示例代码如下：
--- ------ - -
----- -----
---------- -
------------------- -- ---- -- - - ----------- -- -------------
-
--
------------------ -- --------- -- ---- -- --
--- ------ - -
----- -----
--------- ---------- -
------------------- -- ---- -- - - ----------- -- ------------
-
--
--- -------- - -----------------------------
----------- -- --------- -- ---- -- --
--- ------ - -
----- -----
--------- ---------- -
--- ---- - -----
--- ----- - ---------- -
------------------- -- ---- -- - - ----------- -- -----------
--
--------
-
--
------------------ -- --------- -- ---- -- --来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f13ab7f6b2d6eab3b0f88e