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函数。