探索JavaScript this绑定规则——揭开神秘面纱！

前端

2023-10-16 21:02:50

在JavaScript的世界里，this就像一位变色龙，可以根据不同的情况改变自己的指向。

我们常常使用this来访问对象的方法和属性，它可以帮助我们写出简洁、优雅的代码。但这看似简单的this，背后却隐藏着复杂的绑定规则，常常让人迷惑不解。

今天，我们就来揭开this神秘的面纱，全面剖析this的绑定规则，帮助大家彻底掌握this的运作机制。

this的绑定规则：普通模式

在普通模式下，this的绑定遵循以下规则：

默认绑定： 当一个函数被调用时，如果它没有被任何对象调用，那么this将指向window对象。
隐式绑定： 当一个函数被一个对象调用时，this将指向这个对象。
显式绑定： 当使用bind、call或apply方法调用一个函数时，我们可以显式地指定this的指向。

this的绑定规则：严格模式

在严格模式下，this的绑定规则更加严格，它遵循以下规则：

默认绑定： 在严格模式下，当一个函数被调用时，如果它没有被任何对象调用，那么this将指向undefined。
隐式绑定： 在严格模式下，当一个函数被一个对象调用时，this将指向这个对象。
显式绑定： 在严格模式下，当使用bind、call或apply方法调用一个函数时，我们仍然可以显式地指定this的指向。

this的绑定规则：实例解析

为了更好地理解this的绑定规则，我们来看几个具体的例子：

// 默认绑定
function sayHello() {
  console.log(this);
}

sayHello(); // 输出：window

在这个例子中，sayHello函数没有被任何对象调用，因此this指向window对象。

// 隐式绑定
const person = {
  name: 'John',
  sayHello: function() {
    console.log(this.name);
  }
};

person.sayHello(); // 输出：John

在这个例子中，sayHello函数被person对象调用，因此this指向person对象。

// 显式绑定
function sayHello(name) {
  console.log(this.name + ' says hello to ' + name);
}

const person1 = {
  name: 'John'
};

const person2 = {
  name: 'Mary'
};

sayHello.bind(person1)('Jane'); // 输出：John says hello to Jane
sayHello.call(person2, 'Bob'); // 输出：Mary says hello to Bob
sayHello.apply(person2, ['Tom']); // 输出：Mary says hello to Tom