关于 this 一切的秘密：四条规则轻松判断函数的 this 绑定对象

2023-11-30 20:52:28

在 JavaScript 的世界中，理解 this 是编写健壮和可维护代码的关键。对于一个正在运行的函数来说，this 的值取决于函数被如何调用，而这可能会对程序的行为产生重大影响。为了帮助您轻松判断函数的 this 绑定，这里有一个四条规则的指南：

规则 1：显式绑定

当函数使用 bind() 方法显式绑定时，this 被设置为 bind() 方法中提供的对象。

const obj = {
  name: "John"
};

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const boundFunction = greet.bind(obj);
boundFunction(); // 输出: Hello, John!

在这种情况下，this 被显式绑定到 obj 对象，因此 greet 函数调用时，this 将指向 obj。

规则 2：隐式绑定

如果一个函数作为对象的方法被调用，this 被隐式绑定到该对象。

const person = {
  name: "Jane",
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

person.greet(); // 输出: Hello, Jane!

这里，greet 函数是 person 对象的一个方法，因此 this 隐式绑定到 person，并且 greet 函数调用时，this 将指向 person。

规则 3：默认绑定

如果一个函数作为独立函数被调用，即没有显式绑定或作为对象方法调用，this 被绑定到全局对象。在严格模式下，this 为 undefined，而在非严格模式下，this 为全局对象。

function greet() {
  console.log(`Hello, ${this.name}!`);
}

greet(); // 非严格模式: 输出: Hello, undefined! (默认绑定到全局对象)

规则 4：箭头函数

箭头函数 (=>) 没有自己的 this 绑定。它们继承其父作用域的 this 值。

const obj = {
  name: "John",
  greet: () => {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // 输出: Hello, undefined! (继承父作用域的 this 为 undefined)

总结：

判断函数的 this 绑定对象时，依次应用以下规则：