JavaScript 中 this 绑定的规则指南

2023-10-07 10:38:20

JavaScript 中 this 的本质

在 JavaScript 中，this 是一个特殊的，它代表当前执行代码的上下文对象。理解 this 的绑定机制对于编写干净、可维护且无错误的 JavaScript 代码至关重要。

this 绑定的四种规则

this 的绑定方式取决于函数的调用方式：

1. 全局调用

当一个函数在全局上下文中调用时（即没有明确的对象引用），this 被绑定到全局对象。在浏览器环境中，全局对象是 window，在 Node.js 环境中，它是 global。

function globalCall() {
  console.log(this); // 输出：Window { ... } 或 global { ... }
}

globalCall();

2. 方法调用

当一个函数作为对象的方法被调用时，this 被绑定到该对象。

const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`); // 输出：Hello, my name is John
  }
};

person.greet();

3. 构造函数调用

当一个函数被用作构造函数（用 new 关键字调用）时，this 被绑定到新创建的对象。

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // 输出：John

4. 箭头函数调用

箭头函数（=>）没有自己的 this 绑定。它继承了其封闭作用域中的 this 值。

const person = {
  name: "John",
  greet: () => {
    console.log(`Hello, my name is ${this.name}`); // 输出：undefined
  }
};

person.greet();

控制 this 绑定

在某些情况下，您可能需要显式控制 this 的绑定。可以通过以下方法实现：

bind() 方法

bind() 方法创建一个新函数，并将其 this 值永久绑定到指定的上下文对象。

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log(this); // 输出：DOM 元素
}.bind(button));

call() 和 apply() 方法

call() 和 apply() 方法显式调用一个函数，并指定 this 值和参数。

const person = {
  name: "John"
};

const greet = function(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
};

greet.call(person, "Hello"); // 输出：Hello, my name is John