JS-箭头函数中的this的指向(笔记转载)

发布网友 发布时间:2024-10-31 21:02

我来回答

1个回答

热心网友 时间:2024-10-31 21:10

在JavaScript领域中,this的用途广泛。本文将着重于阐述箭头函数中的this指向特性,避免涉及this的基本概念及其原理的详细解释。以下是四个典型的场景,以方便理解箭头函数和普通函数在this指向上的差异。


在这些场景中,对比函数函数和箭头函数的this指向:


1. 普通函数中的this



    使用function函数:定义变量a并赋值为0。函数foo内部输出this和this.a的值。执行后,输出为window和0。
    箭头函数:定义同上,但结果输出为window和0。

2. 函数作为对象的属性



    使用function函数:创建对象obj,包含属性myname和say方法。调用say方法输出this和my name is myname。
    箭头函数:在obj上使用相同say方法,输出为window和my name is undefined。

3. 在构造函数中



    使用function函数:定义Animal构造函数,并使用new操作符创建实例animal。输出为{name: 'dog', age: 3}。
    箭头函数:尝试使用相同构造函数,输出错误信息:Animal is not a constructor。

4. call和apply场景



    使用function函数:定义getPer函数,调用getPer.call方法输出this和myname的值。
    箭头函数:同样调用call方法,输出为window和undefined。

为什么箭头函数中this不同


箭头函数中this的指向与我们所熟悉的函数不同,原因在于this在箭头函数中的指向是固定的,绑定于定义时所在的作用域,而非运行时所在的作用域。


以回调函数为例,理解这一点更为直观。回调函数中的this指向window,这导致了在回调函数中的this不固定。为解决此问题,通常需要固定this。然而,在箭头函数中,其this继承外层函数调用的this,因此无需额外固定。


箭头函数的注意事项



    函数体内的this对象,指向定义时所在对象,而非使用时所在对象。
    箭头函数不能作为构造函数使用,new命令会抛出错误。
    箭头函数内部不支持arguments对象,推荐使用Rest参数替代。
    箭头函数不能使用yield命令,因此不能用作Generator函数。
声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。
E-MAIL:11247931@qq.com