避免 ES6 中 this 指向丢失的问题

在 ES6 中，使用箭头函数可以避免 this 指向丢失的问题。但在某些情况下，我们无法使用箭头函数来解决 this 指向的问题，比如事件绑定函数和类的方法。本文将介绍三种避免 ES6 中 this 指向丢失的问题的方法。

方法一：使用 bind 方法

bind 方法会创建一个新函数，它的 this 值会被绑定到调用 bind 方法的第一个参数。这意味着我们可以使用 bind 方法来将类的方法绑定到类的实例上，以避免 this 指向丢失的问题。

class MyClass {
  constructor(name) {
    this.name = name;
    this.handleClick = this.handleClick.bind(this);
  }

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

const myInstance = new MyClass('World');
document.querySelector('#my-button').addEventListener('click', myInstance.handleClick);

在上面的代码中，我们将 MyClass 实例的 handleClick 方法绑定到了 myInstance 上，确保了 handleClick 中的 this 始终指向 myInstance。

方法二：使用箭头函数

在箭头函数中，this 的值被绑定到函数定义时的上下文，而不是函数调用时的上下文。因此，我们可以使用箭头函数来避免 this 指向丢失的问题。

class MyClass {
  constructor(name) {
    this.name = name;
  }

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

const myInstance = new MyClass('World');
document.querySelector('#my-button').addEventListener('click', myInstance.handleClick);

在上面的代码中，我们使用箭头函数来定义 handleClick 方法，这样 handleClick 中的 this 始终指向 myInstance。

方法三：使用闭包

使用闭包也是一种避免 this 指向丢失的问题的方法。在闭包中，我们可以访问到定义时的 this 值，以避免 this 指向丢失的问题。

class MyClass {
  constructor(name) {
    this.name = name;
    this.handleClick = () => {
      console.log(`Hello, ${this.name}!`);
    };
  }
}

const myInstance = new MyClass('World');
document.querySelector('#my-button').addEventListener('click', myInstance.handleClick);

在上面的代码中，我们使用闭包来定义 handleClick 方法，这样 handleClick 中的 this 始终指向 myInstance。

总结

避免 ES6 中 this 指向丢失的问题，可以使用 bind 方法、箭头函数或者闭包。使用这些方法，我们可以确保 this 始终指向我们想要的对象，从而避免 this 指向丢失的问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65951e1aeb4cecbf2d958e83