在 ES6 中，使用箭头函数定义方法已经成为前端程序员的标配。相比于传统函数，箭头函数不仅写法简洁，而且拥有更为明确的 this 指向特性，解决了开发者们长期以来对 this 指向的迷惑。但是，仍然有一些场景下需要注意 this 的指向问题，本文将详细介绍 ES6 中 this 指向问题的解决方法。
this 的指向问题
JavaScript 中的 this 指向是一直以来就存在的问题，开发者们常常会发现同样的代码，this 指向却在不同的函数中指向不同的对象，这往往会给开发带来一定的困扰。在一个对象方法中使用 this 关键字可以很好的绑定对象的属性和方法，但是，如果将方法传递给其他函数使用，函数内的 this 指向就会发生变化。这就需要我们在编码中注意 this 指向的问题。
-- -------------------- ---- -------
----- --- - -
------ ---
---------- -
------------------------
-
--
----- ----- - ----
----- ----------- - -------------
-------------- -- ---------在上面的代码中，当我们将 obj.getValue() 方法赋值给一个新的变量 objGetValue 后，再调用 objGetValue() 方法时，输出的值为 undefined，原因是此时的 this 指向已经不是 obj 这个对象了，而是 window（或者 global）对象，因此 obj 对象中的 value 属性变成了 undefined。
箭头函数的 this 指向
为了解决函数内的 this 指向问题，ES6 中引入了箭头函数。箭头函数中没有自己的 this，它会捕获其所在上下文的 this 值，因此箭头函数内部的 this 就是定义时所在作用域内的 this 指向。
-- -------------------- ---- -------
----- --- - -
------ ---
---------- -
----- ------------- - -- -- -
------------------------
--
----------------
-
--
--------------- -- --上面的代码中，将箭头函数 getValueArrow 定义在了对象 obj 的 getValue 方法中，并在方法内部调用。由于箭头函数内部没有自己的 this，因此 getValueArrow 函数所在的作用域中的 this 即为 obj 对象，最终输出 42。
使用 bind 绑定 this
除了使用箭头函数外，还有一种常见的解决 this 指向问题的方法即使用函数的 bind、call 或 apply 方法手动绑定 this 的值。这三个方法都是改变函数执行时 this 的指向，区别在于传入参数的方式不同。其中，bind 方法绑定 this 的同时并不立即调用函数，而是返回一个新的函数，传入的第一个参数即为 this 要指向的对象。
-- -------------------- ---- -------
----- --- - -
------ ---
---------- -
----- ------------ - ---------- -
------------------------
-------------
---------------
-
--
--------------- -- --在上述代码中，定义了一个匿名函数 getValueBind，并使用 bind(this) 将其绑定到 obj 对象上，最终输出 42。此时，不管是在方法内部直接调用函数还是将函数赋值给一个变量，this 的值都已经能够被成功地绑定到 obj 对象上。
总结
总的来说，this 指向问题是 JavaScript 开发中常见的问题。在 ES6 中，除了常规的 bind、call 和 apply 方法以外，箭头函数的出现大大简化了 this 指向的问题。对于函数内部需要使用到 this 指向的场景，建议使用箭头函数或 bind 绑定 this 的值，以保证代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cc3df95b1f8cacd442ecb