解析 ES6 箭头函数的 this 关键字
在传统的 JavaScript 函数中，this 关键字指向的是调用该函数的对象。然而在 ES6 中，箭头函数的 this 关键字有着不同的指向。本文将详细解析箭头函数的 this 关键字，让大家深入理解其用法以及注意事项。
为什么需要箭头函数
在 ES6 之前，JavaScript 中的函数只有两种：具名函数和匿名函数。在使用具名函数时，我们通常会定义一个变量来引用该函数，然后将该变量传递给其他函数，以供调用：
-------- ------ -- - ------ - - -- - --- ------ - ------ --- -------------------- -- -
但如果我们想使用匿名函数，则需要将其直接传递给调用函数，并直接执行：
--- ------ - ------------ -- - ------ - - -- ----- --- -------------------- -- -
这样写虽然比使用具名函数简短，但是较为不易读，也不便于维护。在 ES6 中，我们引入了一种新的函数类型——箭头函数。箭头函数既可以具名也可以匿名，如下：
-- ------ ----- --- - --- -- -- - - -- -- ------ ----- ------ - ---- -- -- - - ----- --- ------------------ ---- -- - -------------------- -- -
可以看到，使用箭头函数可以更加简洁明了地表示函数的逻辑，而且就像上面那个例子一样，它还可以一行完成。
箭头函数的 this 关键字
在传统函数中，this 关键字的指向与调用该函数的对象有关。而在箭头函数中，this 关键字的指向与该函数所在的作用域有关。
例如，我们使用一个示例代码来说明这个问题：
--- ----- - -
------- ---------- -
------------------
-
--
--------------- -- -- ----- --在上面的代码中，我们调用了一个方法，myObj 对象的上下文被设置为 this。但是如果按照同样的方式来调用箭头函数，则会发现输出的 this 并不是 myObj 对象，而是函数所处的作用域，也就是全局对象：
--- ----- - - ------- -- -- ----------------- -- --------------- -- ------
这是因为箭头函数没有自己的 this 绑定，它会继承当前执行上下文的 this 值。因此，在箭头函数中使用 this 与在调用它的作用域中使用 this 完全相同。这在编写复杂的函数时非常有用，可以避免由于 this 指向不正确而出现难以追踪的错误。
下面我们再来看一个示例：
--- ----- - -
------ ------
------- ---------- -
------------------------
-
--
--------------- -- -- ---在上面的代码中，当调用 myFunc() 方法时，this 指向了 myObj 对象，从而正确地输出了 foo。但如果我们将 myFunc() 方法改为箭头函数，则会失败：
--- ----- - - ------ ------ ------- -- -- ----------------------- -- --------------- -- -- ---------
由于箭头函数没有自己的 this，因此 this.myVar 返回了 undefined。
如何确定箭头函数的 this 指向
在箭头函数中，this 关键字的指向是由其定义的上下文来决定的。因此，在确定箭头函数的 this 指向时，需要考虑箭头函数的定义位置以及所处的执行上下文。有以下两种情况：
- 全局作用域
在全局作用域中声明的箭头函数的 this 指向全局作用域对象 window。
----- ------ - -- -- ------------------ --------- -- -- ------ --
- 对象方法
当箭头函数用作对象方法时，this 关键字指向该对象本身，而不是作为其方法调用的对象。
--- ----- - - ------ ------ ------- -- -- ----------------------- -- --------------- -- ------
在上述示例中，尽管 myFunc 是以对象方法的形式定义的，但其 this 关键字指向的是其定义时所处的执行上下文。如果我们改为使用传统函数，则会得到预期的结果：
--- ----- - -
------ ------
------- ---------- -
------------------------
-
--
--------------- -- -- ---上面的代码正确地输出了 foo。
除此之外，在事件处理函数中，箭头函数可以很方便地获取到其定义时所在的执行上下文，如下所示：
------- ------------------------------- -------- ----- ------ - -- -- ------------------ ---------
在上述示例中，点击按钮时，最终会调用 myFunc 方法并输出全局对象。
总结
作为 ES6 的一种新特性，箭头函数可以简化代码，提高代码可读性，减少代码冗余。但是它与传统函数有很大的区别，需要注意其 this 关键字的指向问题。在使用箭头函数时，需要根据其定义位置以及所处的执行上下文来确定它的 this 关键字指向。只有正确地使用箭头函数，才能充分发挥其优势，避免出现难以追踪的错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6536a3587d4982a6ebec30c2