“this”与“context”关系解惑：洞悉JS中的指向怪现象

在JavaScript中，“this”是一个非常特殊的，它指向当前正在执行代码的对象。然而，这种指向机制并不是一成不变的，而是会根据不同的情况而有所不同。了解“this”的指向规则，有助于我们更好地理解和编写JavaScript代码。

首先，我们先来了解一些错误的理解。

• 错误理解一： “this”总是指向当前正在执行的函数。

事实上，“this”并不总是指向当前正在执行的函数。当函数被作为对象的方法调用时，“this”指向的是这个对象。例如，以下代码中，“this”指向的是person对象：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is John.

• 错误理解二： “this”总是指向全局对象。

当JavaScript代码在全局作用域中执行时，“this”指向的是全局对象。然而，当代码在函数中执行时，“this”并不一定指向全局对象。例如，以下代码中，“this”指向的是window对象：

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

greet(); // 输出: Hello, my name is undefined.

那么，“this”的指向规则到底是什么呢？

• 规则一： 在非严格模式下，当函数作为对象的方法调用时，“this”指向这个对象。
• 规则二： 在严格模式下，当函数作为对象的方法调用时，“this”指向undefined。
• 规则三： 当函数被独立调用时，“this”指向全局对象。

在实际开发中，我们经常会遇到一些“this”指向怪异的情况。这些情况通常是由箭头函数引起的。箭头函数没有自己的“this”指向，它会继承父作用域的“this”指向。例如，以下代码中，“this”指向的是window对象：

const person = {
  name: 'John',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is undefined.

为了避免箭头函数引起的问题，我们可以使用普通函数或bind()方法来显式指定“this”的指向。例如，以下代码中，我们使用bind()方法将“this”指向person对象：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const greetPerson = person.greet.bind(person);

greetPerson(); // 输出: Hello, my name is John.

掌握了“this”的指向规则，可以帮助我们避免很多bug，同时写出更加健壮的代码。