针对 this 指向问题的多维度解决方案

2023-12-30 04:39:00

this 指向的本质

this 指向是 JavaScript 中一个特殊，它指向函数执行时的上下文对象。在大多数情况下，this 指向调用函数的对象。例如：

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

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

在这个例子中，this 指向 person 对象，因为 greet() 方法是通过 person 对象调用的。

this 指向问题

在某些情况下，this 指向可能会变得混乱，导致意外的结果。最常见的问题之一是当函数作为回调函数被调用时，this 指向可能会发生变化。例如：

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log(this); // 输出：Window
});

在这个例子中，当按钮被点击时，this 指向 window 对象，而不是 button 对象。这是因为 addEventListener() 方法将函数作为回调函数来调用，此时函数的执行上下文发生了变化，导致 this 指向发生了变化。

解决 this 指向问题的方案

使用箭头函数

箭头函数（ES6 中引入）的 this 指向与普通函数不同。箭头函数的 this 指向始终指向定义该函数时的上下文对象。例如：

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(this); // 输出：Button
});

在这个例子中，箭头函数的 this 指向 button 对象，因为箭头函数是在 button 对象的上下文中定义的。

使用 _this = this

在函数内部使用 _this = this 可以手动指定 this 的指向。例如：

const person = {
  name: "John Doe",
  greet: function() {
    const _this = this; // 保存 this 的指向
    
    setTimeout(function() {
      console.log(`Hello, my name is ${_this.name}.`);
    }, 1000);
  }
};

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

在这个例子中，setTimeout() 函数将一个匿名函数作为回调函数来调用。匿名函数内部的 this 指向 window 对象，而不是 person 对象。为了解决这个问题，我们在 greet() 方法中使用 _this = this 来手动指定 this 的指向，这样就可以确保 setTimeout() 函数中的匿名函数的 this 指向 person 对象。

使用 apply, call, bind

apply(), call() 和 bind() 方法可以改变函数的执行上下文，从而改变 this 的指向。例如：

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log(this); // 输出：Window
});

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

button.addEventListener("click", person.greet.bind(person)); // 输出：Hello, my name is John Doe.