如何访问javascript成员函数中的两个"this“

在 JavaScript 中，this 关键字是一个特殊的变量，它在函数被调用时自动绑定到一个特定的上下文对象。this 的值取决于函数的调用方式。在一个成员函数中访问两个 this 可能是指访问实例的 this 和局部的 this。

基础概念

• 全局 this：在全局作用域中，this 指向全局对象，在浏览器中是 window 对象。
• 函数 this：在普通函数中，this 的值取决于函数的调用方式。如果是通过对象调用，this 指向该对象；如果是直接调用，this 指向全局对象（在严格模式下是 undefined）。
• 箭头函数 this：箭头函数不绑定自己的 this，它会捕获其所在上下文的 this 值。

类型

• 实例 this：在类的方法中，this 通常指向调用该方法的实例。
• 局部 this：在某些情况下，例如回调函数中，this 可能指向另一个对象。

应用场景

当你需要在类的方法中使用回调函数，并且希望回调函数中的 this 也指向类的实例时，你可能会遇到需要访问两个 this 的情况。

问题

如果你在成员函数中遇到了两个不同的 this，可能是因为：

1. 普通函数作为回调：如果你在一个普通函数中使用 this，并且这个函数被传递为回调，那么 this 的值可能会改变。
2. 箭头函数作为回调：如果你使用箭头函数作为回调，那么 this 的值会保持不变，指向定义时所在的上下文。

解决方法

使用箭头函数

箭头函数不会创建自己的 this 上下文，它会捕获其所在作用域的 this 值。这是访问类实例 this 的一种常见方式。

class MyClass {
  constructor() {
    this.value = 42;
  }

  myMethod() {
    setTimeout(() => {
      console.log(this.value); // 输出 42，箭头函数中的 this 指向 MyClass 的实例
    }, 1000);
  }
}

const instance = new MyClass();
instance.myMethod();

使用 bind 方法

你可以使用 Function.prototype.bind 方法来显式地绑定 this 的值。

class MyClass {
  constructor() {
    this.value = 42;
  }

  myMethod() {
    setTimeout(function() {
      console.log(this.value); // 输出 42，bind 确保了 this 指向 MyClass 的实例
    }.bind(this), 1000);
  }
}

const instance = new MyClass();
instance.myMethod();

使用变量保存 this

在某些情况下，你可以在函数外部创建一个变量来保存 this 的引用，然后在回调函数中使用这个变量。

class MyClass {
  constructor() {
    this.value = 42;
  }

  myMethod() {
    const self = this; // 保存 this 的引用
    setTimeout(function() {
      console.log(self.value); // 输出 42，使用 self 变量来访问实例的属性
    }, 1000);
  }
}

const instance = new MyClass();
instance.myMethod();

结论

在 JavaScript 中，this 的值取决于函数的调用方式。如果你需要在成员函数中访问两个不同的 this，你可以使用箭头函数、bind 方法或者保存 this 引用的变量来解决这个问题。选择哪种方法取决于你的具体需求和代码风格。