Question

请参阅以下示例代码

var report = {
    chartTypes : null,
    init: function () {
        this.getChartTypes(function(data){
            this.chartTypes = data;
        });
    },

    getChartTypes: function(callback) {
        $.ajax({
            data:'',
            url:'',
            success:function(response){
               chartTypes = JSON.parse(response);
               callback(chartTypes);
            }
        });
    },
    getToolbar:function() {
        this.chartTypes --------------- NULL
    }
}

getChartTypes函数通过AJAX加载不同的图表类型。因此我把它作为回调函数。数据已成功接收。但是当我在this.chartTypes之类的其他函数中使用getToolbar时，它表示this.chartTypes为null。即使我在首发时也初始化了相同的内容。可能是范围问题。请指教。

Answer 1

您正在分配一个名为chartTypes的变量（可能是全局变量），但这与reoprt.chartTypes不同。您需要分配到this.chartTypes，但匿名函数中的this与其外的this不同，因此您需要使用其他变量记住该值：

getChartTypes: function(callback) {
    var self = this;
    $.ajax({
        data:'',
        url:'',
        success:function(response){
           callback( self.chartTypes = JSON.parse(response) );
        }
    });
}

Answer 2

使用OOP方法，大多数开发人员将使用方法并在触发异步成功方法时使用.bind()来维护适当的范围。这样您就不必担心闭包并使用变量来保持this的范围。

var report = {
    chartTypes : null,
    init: function () {
        this.getChartTypes();
    },

    getChartTypes : function(callback) {
        $.ajax({
            data:'',
            url:''                
        }).done(this._setSuccessResponse.bind(this));
    },

    _setSuccessResponse : function(data){
        this.chartTypes = data;
    },

    getToolbar : function() {
        console.log(this.chartTypes);
    }
}

您还需要确保在致电getToolbar时Ajax呼叫也已完成。

我们如何将JavaScript属性设为全局？

2 个答案: