如何为Google Charts加载回调传递正确的JS对象上下文？

我完全懂你遇到的麻烦——Google Charts的load方法不会自动帮你保留回调函数的上下文，导致loadData里的this指向跑偏，没法访问到对象的this._data属性。先回顾下你的问题代码：

MyNewObject = SomeOldObject.extend({
    initialize: function (data, options) {
        this._data = data;
        google.charts.load('current', {
            'packages': ["line", "corechart"],
            "callback": this.loadData //, "context": this //此设置无效
        });
    },
    loadData: function () {
        this._dataTable = new google.visualization.DataTable();
        // 此处希望从this._data中添加数据到this._dataTable，但上下文不符
    }
})

下面给你三种实用的解决办法，都是JavaScript里处理上下文绑定的经典技巧：

解决方案 #

Google Charts的load配置里确实没有context参数，但我们可以手动把上下文绑定好：

1. 箭头函数（最简洁的ES6方案） #

箭头函数会自动继承外层作用域的this，直接用它包裹你的回调即可：

initialize: function (data, options) {
    this._data = data;
    google.charts.load('current', {
        'packages': ["line", "corechart"],
        "callback": () => this.loadData()
    });
}

这样loadData执行时，this就稳稳指向你的MyNewObject实例，能正常访问this._data了。

2. 使用bind()固定上下文 #

如果你的环境没法用ES6，或者更习惯传统写法，可以用bind()把loadData的this绑定为当前实例：

initialize: function (data, options) {
    this._data = data;
    google.charts.load('current', {
        'packages': ["line", "corechart"],
        "callback": this.loadData.bind(this)
    });
}

bind()会返回一个新函数，这个函数的this会被永久固定为你传入的参数（也就是当前的对象实例）。

3. 手动保存上下文到变量（ES5兼容方案） #

这是ES6之前的经典写法，先把当前的this存到一个变量里（比如self），然后在回调里用这个变量调用方法：

initialize: function (data, options) {
    var self = this;
    this._data = data;
    google.charts.load('current', {
        'packages': ["line", "corechart"],
        "callback": function() {
            self.loadData();
        }
    });
}

这样回调里的self就指向你的对象实例，调用self.loadData()时，loadData里的this也会正确指向实例。

验证修改后的效果 #

调整后，你就可以在loadData里正常使用this._data了，比如添加数据到DataTable：

loadData: function () {
    this._dataTable = new google.visualization.DataTable();
    // 假设this._data包含columns和rows字段
    this._data.columns.forEach(col => {
        this._dataTable.addColumn(col.type, col.label);
    });
    this._dataTable.addRows(this._data.rows);
    // 接下来就可以绘制折线图了
}

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