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

发布网友 发布时间：11小时前

我来回答

共1个回答

热心网友 时间：11小时前

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