超越规则，探究JavaScript中的this绑定机制

2024-01-18 00:29:56

在上一篇中，我们详细分析了JavaScript中this绑定的四条规则。那么，这些规则的优先级是如何设定的呢？毫不疑问，默认绑定的优先级是最低的，这里暂时先不考虑默认绑定。

this绑定规则的优先级

显式绑定： 显式绑定具有最高的优先级，直接通过bind()、call()或apply()方法指定this值。当函数被调用时，无论其他绑定规则如何，this都将被显式绑定到指定的值。
new绑定： new绑定具有次高的优先级，当一个函数被用作构造函数时，this将被绑定到新创建的对象上。无论其他绑定规则如何，new绑定总是会优先于隐式绑定。
隐式绑定： 隐式绑定具有较低的优先级，当函数作为对象的方法被调用时，this将被绑定到该对象。如果显式绑定和new绑定都不适用，则使用隐式绑定。

示例代码：

// 显式绑定
function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'John'
};

// 将sayHello函数显式绑定到person对象
const boundFunction = sayHello.bind(person);

// 调用boundFunction，this将被绑定到person对象
boundFunction(); // 输出：Hello, John!


// new绑定
function Person(name) {
  this.name = name;

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

// 使用new调用Person函数，this将被绑定到新创建的对象
const newPerson = new Person('Jane');

// 调用newPerson对象的sayHello方法，this将被绑定到newPerson对象
newPerson.sayHello(); // 输出：Hello, Jane!


// 隐式绑定
const person = {
  name: 'John',

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

// 调用person对象的sayHello方法，this将被绑定到person对象
person.sayHello(); // 输出：Hello, John!