TypeScript中类的公共变量无法更新问题求助

这个问题我之前也踩过坑！核心原因是你定义的l3函数内部的this指向根本不是HomePage的实例，所以哪怕resultado是public权限，也没法给它赋值。

先拆解你的代码结构：

class HomePage {
  public resultado: any;

  l1() { 
    this.l2(); 
  } 

  l2() { 
    l3(); 
    function l3(){ 
      this.resultado = "TEST"; 
    } 
  }
}

当你在l2里直接调用l3()时，这个普通函数内部的this在非严格模式下会指向全局对象（比如浏览器里的window），严格模式下则是undefined——完全和你的HomePage实例不沾边，自然没法修改resultado的值。

下面给你几种靠谱的解决办法：

方法1：用箭头函数定义l3 #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是l2里的this，也就是HomePage的实例），这是最简洁的方案：

class HomePage {
  public resultado: any;

  l1() { 
    this.l2(); 
  } 

  l2() { 
    const l3 = () => { 
      this.resultado = "TEST"; 
    }
    l3(); 
  }
}

方法2：提前保存this的引用 #

在l2里把当前实例的this存到一个变量里（比如that或者self），然后在l3里用这个变量访问实例：

class HomePage {
  public resultado: any;

  l1() { 
    this.l2(); 
  } 

  l2() { 
    const that = this; // 保存实例的this引用
    function l3(){ 
      that.resultado = "TEST"; 
    } 
    l3();
  }
}

方法3：用bind绑定this到l3 #

调用l3的时候，通过bind把实例的this绑定进去，强制让l3内部的this指向实例：

class HomePage {
  public resultado: any;

  l1() { 
    this.l2(); 
  } 

  l2() { 
    function l3(){ 
      this.resultado = "TEST"; 
    } 
    l3.bind(this)(); // 绑定this后调用
  }
}

方法4：把l3改成类的成员方法 #

如果l3的逻辑需要在其他地方复用，直接把它定义成类的公共方法，这样调用时this天然指向实例：

class HomePage {
  public resultado: any;

  l1() { 
    this.l2(); 
  } 

  l2() { 
    this.l3(); 
  }

  l3() {
    this.resultado = "TEST";
  }
}

以上几种方法都能解决你的问题，其中箭头函数的方式最推荐，代码简洁还不容易出错。

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