Google Chart的setOnLoadCallback使用类方法报this undefined如何解决

你遇到的报错是JavaScript函数上下文绑定的典型问题，和Google Chart的配置无关：当你直接将this._googleChartOnLoadCallback作为参数传给google.charts.setOnLoadCallback时，类方法会脱离原实例的上下文，回调被触发时内部的this不再指向你的MyChart实例，严格模式下就会是undefined。

可以直接用类方法作为回调，只需要手动绑定正确的this上下文即可，常用实现方式有3种：

方案1：用箭头函数包裹回调（最简便） #

箭头函数会继承外层作用域的this，也就是show方法执行时的MyChart实例：

class MyChart {
   show(title) {
      this.title = title;
      google.charts.load('current', { 'packages': ['bar'] });
      // 用箭头函数包裹回调，保留this指向
      google.charts.setOnLoadCallback(() => this._googleChartOnLoadCallback());
   }

    _googleChartOnLoadCallback() {
        console.log("_googleChartOnLoadCallback is called", this.title);
        // 图表渲染逻辑可直接访问所有实例属性
    }
}

方案2：用bind显式绑定实例上下文 #

直接将类方法绑定到当前实例，固定this指向：

google.charts.setOnLoadCallback(this._googleChartOnLoadCallback.bind(this));

如果需要额外传入专属数据，也可以通过bind的后续参数传递：

google.charts.setOnLoadCallback(this._googleChartOnLoadCallback.bind(this, extraData1, extraData2));

回调接收参数即可：

_googleChartOnLoadCallback(data1, data2) {
  // 直接使用传入的参数
}

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

将回调方法直接定义为实例的箭头函数属性，永久绑定实例上下文：

class MyChart {
   show(title) {
      this.title = title;
      google.charts.load('current', { 'packages': ['bar'] });
      google.charts.setOnLoadCallback(this._googleChartOnLoadCallback);
   }

   // 定义为箭头函数属性，this固定指向当前实例
    _googleChartOnLoadCallback = () => {
        console.log("_googleChartOnLoadCallback is called", this.title);
    }
}

如果需要传入图表专属数据，直接挂载到实例属性上（比如你示例里的this.title）即可，正确绑定this后回调内可以直接访问所有实例属性，不需要额外的配置。

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