当前位置：首页 > 文章列表 > 文章 > 前端 > 揭秘 JavaScript 中的“this”关键字

揭秘 JavaScript 中的“this”关键字

来源：dev.to 2024-07-09 20:24:55 0浏览收藏

本篇文章向大家介绍《揭秘 JavaScript 中的“this”关键字》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

JavaScript 中的 this 关键字存在很多混乱。 MDN 官方网络文档中描述的方式不是很直观。如果您有类似的感觉，让我们通过一些实际例子来了解这个关键字。

这是什么？

this 关键字指的是一段代码应该运行的上下文。如果我们在浏览器中控制台记录以下内容，我们会得到什么？

console.log（这个）

上面代码运行的结果是整个浏览器Window对象。如果您在 Node 中运行它，您将获得 global 对象。因此，这代表了定义代码的上下文。

让我们看一个例子。下面我们有一个名为 Student 的对象，在该对象内部我们将定义一个名为 testFunction 的函数。

常量学生 = {
  姓名：“乔恩”，
  电话：415887231、

  测试函数：函数（）{
    控制台.log(这个);
  },
};
学生.testFunction();

输出：

{
    姓名：“乔恩”
    电话：415887231
    测试函数： ▪ 测试函数()
}

我们从 testFunction 内部控制台记录这一点。由于 testFunction 是在学生对象内部定义的，因此我们将整个学生对象作为输出。学生对象是定义函数的上下文。

这和 Node 中的严格模式

当你在 Node 中使用严格模式时，其行为是不同的。以下示例演示了该行为。

'使用严格'；

// 顶层
控制台.log(这个);  // {}

函数严格函数() {
    控制台.log(这个);  // 不明确的
}

严格函数（）；

在模块的顶层，这仍然是全局对象。然而，在函数内部，这现在是未定义。

为什么这会有用？严格模式有很多用例。以下是其中的一些。

避免意外的全局变量：

'使用严格'；
x = 10； // ReferenceError: x 未定义

为未声明的变量赋值会创建一个全局变量。严格模式可以防止这种情况发生。

对象文字中的重复：

'使用严格'；

var 对象 = {
    道具：1，
    prop: 2 // 语法错误：对象文字中的数据属性重复
};

严格模式会因对象文本中重复的属性名称而引发错误。

捕获无声错误：

在非严格模式下，为不可写属性赋值不会默默执行任何操作。在严格模式下，它会抛出错误。

//非严格模式
var obj = {};
Object.defineProperty(obj, 'x', { 值: 42, 可写: false });

obj.x = 9; // 默默地失败，obj.x 仍然是 42
console.log(obj.x); // 42

'使用严格'；

var obj = {};
Object.defineProperty(obj, 'x', { 值: 42, 可写: false });

obj.x = 9; // TypeError: 无法分配给对象 '#

这在常规函数和箭头函数中表现如何？

了解它在不同场景中的行为对于编写干净且可预测的 JavaScript 代码非常重要，特别是在处理对象方法和回调时。

下面的示例展示了 this 在函数内部定义的常规回调函数中的行为。

常量学生 = {
  姓名：“乔恩·多伊”，
  打印所有课程：函数（）{
    const 科目 = ["cs-101", "cs-202", "econ-101"];
    subject.forEach(函数 (子) {
      控制台.log(子);
      console.log("学生姓名", this.name);
    });
  },
};

学生.printAllCourses();

// 输出

/**CS-101
学生姓名未定义
CS-202
学生姓名未定义
经济-101
学生姓名未定义
**/

注意 forEach 的回调函数正在尝试访问 name 属性，但返回 undefined。

现在将回调函数变成箭头函数并再次运行代码。

常量学生 = {
  姓名：“乔恩·多伊”，
  打印所有课程：函数（）{
    const 科目 = ["cs-101", "cs-202", "econ-101"];
    subject.forEach((sub) => {
      控制台.log(子);
      console.log("学生姓名", this.name);
    });
  },
};

学生.printAllCourses();

// 输出

/**CS-101
学生姓名 Jon Doe
CS-202
学生姓名 Jon Doe
经济-101
学生姓名 Jon Doe
**/

请注意，这次它能够按预期访问 name 属性。

这里到底发生了什么？

常规函数中的 this 取决于函数的调用方式。当常规函数用作回调时，只有 this 才引用全局对象（浏览器中的窗口），如上例所示。或者，如果该函数没有作为回调函数调用，它可以使用 this 访问父对象的属性。因此，基本上，回调函数始终被视为在全局上下文中定义的函数。

另一方面，箭头函数没有自己的 this 上下文。相反，它们在词法上从周围的代码继承了它。这仅仅意味着箭头函数可以访问定义它的对象的属性。因此箭头函数内部的 this 与箭头函数外部的 this 相同。

常量学生 = {
  姓名：“乔恩·多伊”，
  打印所有课程：函数（）{
    const 科目 = ["cs-101", "cs-202", "econ-101"];
    console.log("外箭头函数", this); // 这里的this和下面回调箭头函数里面的this是一样的
    subject.forEach((sub) => {
      console.log("内部箭头函数", this); // 与上面相同
    });
  },
};
学生.printAllCourses();

嘿，如果您喜欢这篇文章并希望看到更多类似内容，请不要忘记在 dev.to、X 或 LinkedIn 上关注我

这在 es6 类上下文中如何工作？

在 ES6 类中，与传统 JavaScript 函数相比，此关键字更具可预测性和一致性。当在类的内部方法中使用 this 时，它通常指的是调用该方法的类的实例。

考虑一个简单的 ES6 类：

类人{
  构造函数（名称）{
    this.name = 名称；
  }

  打印名称() {
    console.log(this.name);
  }
}

const person = new Person('爱丽丝');
person.printName(); // 输出：爱丽丝

在示例中，构造函数方法中的 this 指的是正在创建的类的新实例。

printName 方法中的 this 指的是调用 printName 方法的 Person 类的实例。

现在让我们看一个示例，该示例显示了使用类方法作为回调时的潜在问题以及如何解决这些问题：

类人{
  构造函数（名称）{
    this.name = 名称；
  }

  打印名称() {
    console.log(this.name);
  }

  打印名称延迟() {
    设置超时（函数（）{
      console.log(this.name);
    }, 1000);
  }

  printNameDelayedWithArrow() {
    设置超时（（）=> {
      console.log(this.name);
    }, 1000);
  }

  printNameDelayedWithBind() {
    设置超时（函数（）{
      console.log(this.name);
    }.bind(this), 1000);
  }
}

const person = new Person('鲍勃');
person.printName(); // 输出：鲍勃
person.printNameDelayed(); // 输出：未定义（或严格模式下的错误）
person.printNameDelayedWithArrow(); // 输出：鲍勃
person.printNameDelayedWithBind(); // 输出：鲍勃

注意，printNameDelayed方法中传递给setTimeout的回调函数是一个常规函数，所以里面的this并不引用Person的实例。相反，它引用全局对象（或在严格模式下未定义）。

使用箭头函数作为回调可以保留封闭方法中的 this 上下文，因此 this 引用的是 Person 的实例。 printNameDelayedWithArrow 是回调问题的一个可能的解决方案。

解决这个回调问题的另一种方法是通过绑定。在 printNameDelayedWithBind 中，我们显式地将回调函数绑定到 this 。它确保回调中的 this 引用 Person 的实例。