ES6 中如何处理 this 指向
在 JavaScript 中，this 指向在很多情况下是非常重要的。ES6（ES2015）为 this 指向提供了一些新的解决方案。在本文中，我们将讨论 ES6 中的箭头函数、bind()、call() 和 apply() 方法等方法，来掌握 this 指向的使用。
箭头函数
箭头函数是 ES6 中的一个新特性，它可以用来更好地处理函数中的 this 指向问题。
在普通的函数中，this 指向是基于如何调用函数的。而在箭头函数中，this 的指向是由箭头函数所处的词法环境决定的。在箭头函数中，this 绑定的是箭头函数声明时所在的作用域的 this 值，而不是箭头函数在执行时所在的作用域的 this 值。
以下是箭头函数的使用示例：
-- -------------------- ---- -------
--- ----- - -
------ --
--------- ---------- -
--- ----- - -- -- ------------------------
--------
-
--
----------------- -- -- -在上面的示例中，我们使用箭头函数来解决了普通函数中 this 指向的问题。箭头函数 this 指向是由词法环境来决定的，因此 inner 函数中的 this 指向的是 myObj 的对象本身，而不是指向全局作用域。
bind()
bind() 方法可以让我们手动改变 this 的指向。
bind() 方法返回一个新的函数，这个函数的 this 值被绑定到 bind() 方法的第一个实参的值，而且 bind() 方法的返回值是可被执行的函数。
以下是一个使用 bind() 方法的示例：
-- -------------------- ---- -------
--- ----- - -
------ --
--------- ---------- -
-------- ------- -
------------------------
-
--- ------- - ------------------
----------
-
--
----------------- -- -- -在上面的示例中，我们可以看到，我们手动将 inner 函数中的 this 值绑定到了 myObj 对象，因此在 myInner 被执行的时候，this 指向的就是 myObj 对象了。
call() 和 apply()
与 bind() 方法一样，call() 和 apply() 方法也可以手动改变 this 的指向。
call() 方法会立即执行一个函数，它将 this 指向传递给它的第一个实参的值，而余下的实参则是被传递到函数中。
apply() 方法的行为和 call() 一样，除了 apply() 方法接受的实参是以一个数组的形式传递的。
以下是使用 call() 和 apply() 的示例：
-- -------------------- ---- -------
--- ----- - -
------ --
--------- ---------- -
-------- ------- -
------------------------
-
------------------
-
--
----------------- -- -- -在以上示例中，我们在 inner 函数中使用了 call() 方法将内部的 this 绑定到了 myObj 对象。
结论
箭头函数提供了更加简单和易于理解的 this 指向方式。如果可使用箭头函数解决 this 指向问题，尽量使用箭头函数。
如果箭头函数无法满足需求，可以采用 bind()、call() 和 apply() 等方法来手动改变 this 的指向。
除此之外，避免在定时器和事件处理程序中使用 this，因为它们指向的是调用它们的全局上下文。可以通过将它们存储在一个变量中来解决这个问题。
-- -------------------- ---- -------
--- ----- - -
------ --
--------- ---------- -
--- ---- - -----
--------------------- -
------------------------
-- ------
-
--
----------------- -- -- --- -在以上示例中，变量 self 存放了 myObj 对象，因此在 setTimeout() 函数的环境中也可以使用其内部的值。
通过以上示例，我们可以学习如何在 ES6 中更好地处理 this 指向问题。这对于前端工程师们来说是一个很重要的基础知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b0a0a9babaf620fa70af1