TypeScript如何在内部对象函数中访问外部类的myUrl属性？

这个问题其实是JavaScript/TypeScript里非常常见的this指向陷阱——当你用普通function关键字定义aFunction时，函数内部的this已经不再指向MyClassOne的实例了，而是指向它所在的dataGridOptions对象，所以自然拿不到myUrl属性。下面给你几种实用的解决办法：

方案1：使用箭头函数（最推荐） #

箭头函数不会创建自己的this上下文，它会捕获外层作用域的this（也就是MyClassOne的实例），这样就能直接访问myUrl了：

export class MyClassOne {
  private myUrl: string;
  constructor(url: string) {
    this.myUrl = url;
  }
  public GridViewModel = {
    dataGridOptions: {
      dataSource : { store: someSource},
      // 替换成箭头函数
      aFunction: (e) => {
        const postUrl = this.myUrl; // 现在this指向MyClassOne实例，能正常拿到值
      }
    }
  }
}

方案2：提前保存类实例的引用 #

在类的构造函数里把当前实例赋值给一个私有变量（比如self或that），然后在普通函数里通过这个变量访问myUrl：

export class MyClassOne {
  private myUrl: string;
  private self: MyClassOne;
  constructor(url: string) {
    this.myUrl = url;
    this.self = this; // 保存当前实例的引用
  }
  public GridViewModel = {
    dataGridOptions: {
      dataSource : { store: someSource},
      aFunction: function(e){
        const postUrl = this.self.myUrl; // 通过self访问类实例的属性
      }
    }
  }
}

方案3：手动绑定this到类实例 #

在构造函数里，用bind()方法把aFunction的this强制绑定到MyClassOne的实例上：

export class MyClassOne {
  private myUrl: string;
  constructor(url: string) {
    this.myUrl = url;
    // 手动绑定this到当前实例
    this.GridViewModel.dataGridOptions.aFunction = this.GridViewModel.dataGridOptions.aFunction.bind(this);
  }
  public GridViewModel = {
    dataGridOptions: {
      dataSource : { store: someSource},
      aFunction: function(e){
        const postUrl = this.myUrl; // 现在this指向MyClassOne实例
      }
    }
  }
}

小提示 #

三种方案里，箭头函数的写法最简洁直观，也是TypeScript中处理这类上下文问题的首选方式，建议优先使用。

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