解析 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