箭头函数

2023-07-07 15:54| 来源: 网络整理| 查看: 265

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的 this 值：

如果该函数是一个构造函数，this 指针指向一个新的对象在严格模式下的函数调用下，this 指向undefined 如果该函数是一个对象的方法，则它的 this 指针指向这个对象等等

This被证明是令人厌烦的面向对象风格的编程。

function Person() { // Person() 构造函数定义 `this`作为它自己的实例。 this.age = 0; setInterval(function growUp() { // 在非严格模式，growUp() 函数定义 `this`作为全局对象， // 与在 Person() 构造函数中定义的 `this`并不相同。 this.age++; }, 1000); } var p = new Person();

在 ECMAScript 3/5 中，通过将this值分配给封闭的变量，可以解决this问题。

function Person() { var that = this; that.age = 0; setInterval(function growUp() { // 回调引用的是`that`变量，其值是预期的对象。 that.age++; }, 1000); }

或者，可以创建绑定函数，以便将预先分配的this值传递到绑定的目标函数（上述示例中的growUp()函数）。

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承 this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| 正确地指向 p 实例 }, 1000); } var p = new Person(); 与严格模式的关系

鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。

var f = () => { 'use strict'; return this; }; f() === window; // 或者 global

严格模式的其他规则依然不变。

通过 call 或 apply 调用

由于箭头函数没有自己的 this 指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定 this---译者注），他们的第一个参数会被忽略。（这种现象对于 bind 方法同样成立 --- 译者注）

【本文地址】

公司简介

联系我们