如何在jQuery监听器中正确引用类字段？

我有一个类，需要在jQuery的on监听器中修改类的字段：

class MyClass {
  someField;

  constructor() {
    this.attachListeners();
  }

  attachListeners() {
    $("#id").on("click", function() {
      this.someField = // some data;
    }
  }
}

但监听器内部无法引用this.someField。我曾考虑将字段传入方法中使用，但不确定是否能全局更新someField：

class MyClass {
  someField;

  constructor() {
    this.attachListeners(this.someField);
  }

  attachListeners(someField) {
    $("#id").on("click", function() {
      someField = // some data;
    }
  }
}

核心问题是jQuery事件监听器的回调函数里，this指向的是触发事件的DOM元素，而非类的实例。以下是几种可靠的解决方式：

方法1：使用箭头函数 #

箭头函数不会绑定自身的this，它会继承外层作用域（attachListeners方法）的this，这个this就是类的实例：

class MyClass {
  someField;

  constructor() {
    this.attachListeners();
  }

  attachListeners() {
    $("#id").on("click", () => {
      this.someField = // some data;
    });
  }
}

方法2：提前保存类实例的this #

在attachListeners里把类实例的this存到一个变量（比如self），然后在回调里用这个变量访问字段：

class MyClass {
  someField;

  constructor() {
    this.attachListeners();
  }

  attachListeners() {
    const self = this;
    $("#id").on("click", function() {
      self.someField = // some data;
    });
  }
}

方法3：用bind()绑定this #

通过bind()把回调函数的this强制绑定为类的实例：

class MyClass {
  someField;

  constructor() {
    this.attachListeners();
  }

  attachListeners() {
    $("#id").on("click", function() {
      this.someField = // some data;
    }.bind(this));
  }
}

关于你尝试的传参方法的说明 #

你传入this.someField的方式不可靠：

• 如果someField是基本类型（比如字符串、数字），传递的是值的副本，回调里修改的只是局部变量，不会影响类实例的someField。
• 如果someField是引用类型（比如对象、数组），你可以修改它的内部属性，但直接给someField赋值（比如someField = {}）还是只会修改局部变量，无法更新类实例的字段。

内容的提问来源于stack exchange，提问作者pileup