调用函数触发TypeError：this.myFunction不是函数的排查求助

我一眼就看出问题出在你传递OnSourceChanged作为回调的地方！咱们一步步拆解：

问题根源 #

当你写这段代码的时候：

const sourceNavContext:SourceNavContext = { 
  Items: this.sourceNavItems, 
  Context: this.fieldFormContext, 
  onRecordChanged: this.OnSourceChanged 
};

你把类的方法OnSourceChanged直接赋值给了onRecordChanged属性。当这个回调被触发时，它的this指向已经不再是你的类实例了——此时this会变成调用该回调的上下文（可能是全局对象或者undefined），自然找不到constructPoints这个类方法，所以抛出了TypeError。

而你在onDataSourceLoaded里调用this.constructPoints()是没问题的，因为这个方法是作为类的实例方法被调用的，this指向正确。

解决方案 #

这里有几种靠谱的修复方式，选一种你习惯的就行：

1. 用箭头函数定义OnSourceChanged

箭头函数会自动绑定当前类实例的this，不管怎么传递都不会丢失：

public OnSourceChanged = (source) => { 
  this.pageSource = source; 
  this.constructPoints(); 
}

这样再把它赋值给onRecordChanged时，this依然指向你的类实例。

2. 在构造函数中手动绑定this

如果不想改方法的定义方式，可以在类的构造函数里给OnSourceChanged绑定当前实例：

constructor() {
  // 绑定this到类实例
  this.OnSourceChanged = this.OnSourceChanged.bind(this);
}

之后不管怎么传递这个方法，this都会牢牢指向你的类实例。

3. 在赋值回调时用箭头函数包裹

也可以在创建sourceNavContext的时候，用箭头函数包裹住OnSourceChanged调用，间接绑定this：

const sourceNavContext:SourceNavContext = { 
  Items: this.sourceNavItems, 
  Context: this.fieldFormContext, 
  onRecordChanged: (source) => this.OnSourceChanged(source) 
};

这种方式不需要修改类方法的定义，适合临时场景。

验证修复 #

修复之后，当onRecordChanged触发时，this会正确指向你的类实例，this.constructPoints()就能正常调用了，那个TypeError也就消失啦。

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