如何将嵌套函数转为类函数并解决事件回调中this作用域异常问题

问题根因 #

1. 直接传递this.onOverlayAdd作为回调时，Leaflet的事件触发机制会将回调内部的this绑定到事件源对象（比如地图/图层实例），丢失了类实例的上下文，所以访问不到类的属性和方法。
2. 你尝试的箭头函数写法没有生效，是因为你只返回了this.onOverlayAdd函数引用，没有执行它，回调触发时只拿到了函数但没有调用，自然不会执行内部逻辑。

可行的三种修复方案 #

方案1：修正箭头函数写法，主动调用回调方法

直接在箭头函数内执行onOverlayAdd，箭头函数会自动继承外层类实例的this，同时保证参数正确传递：

private test() {
  // 透传事件参数，加()执行方法
  this._map.on('overlayadd', (eventLayer: L.LeafletEvent) => this.onOverlayAdd(eventLayer)); 
}

private onOverlayAdd(eventLayer: L.LeafletEvent) {
  console.log(this.test); // 这里的this指向类实例，可正常访问
};

方案2：使用bind方法绑定类实例上下文

通过bind方法将onOverlayAdd的this永久绑定到当前类实例，绑定后直接传递即可：

private test() {
  // bind返回绑定了this的新函数，事件触发时this指向类实例
  this._map.on('overlayadd', this.onOverlayAdd.bind(this)); 
}

private onOverlayAdd(eventLayer: L.LeafletEvent) {
  console.log(this.test);
};

方案3：将类方法定义为箭头函数属性

直接在定义类方法时用箭头函数，该方法的this会在类实例初始化时就绑定到实例本身，后续传递不需要额外处理：

private test() {
  this._map.on('overlayadd', this.onOverlayAdd); 
}

// 定义为箭头函数属性，自动绑定类实例this
private onOverlayAdd = (eventLayer: L.LeafletEvent) => {
  console.log(this.test);
};

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