this 指向深入解析：深入浅出 JavaScript 的对象上下文概念

2024-02-20 13:20:39

总论：this 绑定的总原则

要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象：

如果函数是通过 new 调用，那么 this 被绑定到新创建的对象上。
如果函数作为对象的方法调用，那么 this 被绑定到该对象上。
如果函数是作为独立函数调用，那么 this 被绑定到全局对象上（在浏览器中是 window 对象，在 Node.js 中是 global 对象）。
如果函数是作为某个函数的参数传递，那么 this 被绑定到调用该参数的函数的 this 值上。

分论：this 绑定的四条规则

规则一：new 调用

当一个函数通过 new 调用时，this 被绑定到新创建的对象上。这是因为 new 关键字会创建一个新的对象，然后将函数作为该对象的方法调用。例如：

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

const person1 = new Person('John Doe', 30);

console.log(person1.name); // 'John Doe'
console.log(person1.age); // 30

在这个例子中，Person 函数被作为构造函数通过 new 关键字调用，this 被绑定到新创建的 person1 对象上。因此，person1 对象拥有 name 和 age 两个属性，并且可以通过点运算符访问这些属性。

规则二：对象方法调用

当一个函数作为对象的方法调用时，this 被绑定到该对象上。这是因为当一个对象的方法被调用时，this 默认指向该对象。例如：

const person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.greet(); // 'Hello, my name is John Doe and I am 30 years old.'

在这个例子中，greet 方法作为 person 对象的方法被调用，this 被绑定到 person 对象上。因此，this.name 和 this.age 分别指向 person 对象的 name 和 age 属性。

规则三：独立函数调用

当一个函数作为独立函数调用时，this 被绑定到全局对象上。这是因为当一个函数不是作为对象的方法或 new 调用时，this 默认指向全局对象。在浏览器中，全局对象是 window 对象，在 Node.js 中，全局对象是 global 对象。例如：

function greet() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}

greet(); // 'Hello, my name is undefined and I am undefined years old.'

在这个例子中，greet 函数作为独立函数被调用，this 被绑定到全局对象上。由于全局对象没有 name 和 age 属性，因此 this.name 和 this.age 的值为 undefined。

规则四：函数参数传递

当一个函数作为某个函数的参数传递时，this 被绑定到调用该参数的函数的 this 值上。这是因为当一个函数作为参数传递时，它会成为另一个函数的内部函数，因此它的 this 值会继承调用函数的 this 值。例如：

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

const person1 = new Person('John Doe', 30);

function greet(person) {
  console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`);
}

greet(person1); // 'Hello, my name is John Doe and I am 30 years old.'

在这个例子中，greet 函数作为参数传递给 Person 函数的构造函数，this 被绑定到调用 greet 函数的 Person 函数的 this 值上。因此，person 参数指向 person1 对象，并且可以通过点运算符访问 person1 对象的 name 和 age 属性。

结语：this 绑定的灵活应用

在复杂场景下，this 绑定的处理方法可能变得更加复杂。例如，当一个函数作为回调函数传递给另一个函数时，this 的绑定对象可能取决于回调函数的调用方式。为了应对这些复杂场景，JavaScript 提供了一些灵活的绑定方法，例如 bind()、apply() 和 call()，允许开发者显式地指定 this 的绑定对象。

通过深入理解 this 指向的奥秘，开发者可以驾驭 JavaScript 的对象上下文概念，提升代码质量和可维护性。无论你是经验丰富的 JavaScript 开发者，还是刚刚起步的初学者，掌握 this 指向的知识都是必不可少的。