TypeScript中如何通过类方法修改类字段值？

问题原因 #

原代码中cancel.click是普通函数，调用时this指向的是cancel对象而非foo类的实例，因此修改的是cancel对象的show属性（新增属性），而非foo实例的show，导致输出不符合预期。

方案一：使用箭头函数定义click #

箭头函数不会绑定自身的this，会继承外层作用域（即foo实例）的this，直接就能访问实例的show属性：

class foo {
  data = {};
  show = true;
  cancel = {
    click: (data?: any) => {
      console.log("click cancel", data);
      this.show = false;
    },
  };
}

let myfoo = new foo();
console.log(myfoo.show);
myfoo.cancel.click();
console.log(myfoo.show);

运行后输出：

true
click cancel undefined
false

方案二：在构造函数中绑定this #

如果需要保留普通函数形式，可在构造函数里通过bind将click的this绑定到foo实例：

class foo {
  data = {};
  show = true;
  cancel = {
    click: function(data?: any) {
      console.log("click cancel", data);
      this.show = false;
    },
  };

  constructor() {
    this.cancel.click = this.cancel.click.bind(this);
  }
}

let myfoo = new foo();
console.log(myfoo.show);
myfoo.cancel.click();
console.log(myfoo.show);

两种方案都无需传入myfoo实例，且每个foo实例的cancel.click都会独立修改自身的show属性，可直接复用在多个弹窗组件中。

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