我们如何使 JavaScript 属性成为全局的？答案

【问题标题】：How can we make a JavaScript property global?我们如何使 JavaScript 属性成为全局的？
【发布时间】：2016-01-04 13:19:30
【问题描述】：

请参考以下示例代码

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 加载不同的图表类型。因此我把它作为一个回调函数。数据接收成功。但是当我在 getToolbar 等不同的函数中使用 this.chartTypes 时，它会说 this.chartTypes 是 null。即使我在开始时也进行了相同的初始化。可能是范围问题。请指教。

【问题讨论】：

这里已经回答过了：stackoverflow.com/questions/500431/…
@NeilMunro 这不是主要是范围问题 - 这是一个异步问题
您似乎在 AJAX 成功回调中分配了 chartTypes 变量的值。所以在调用读取这个变量的getToolbar函数之前，你应该确保getChartTypes函数已经被调用并且AJAX请求已经成功执行完毕。
它既不是作用域也不是异步（尽管可能存在额外的异步问题）。 this.chartTypes 根本不引用全局变量 chartTypes。
@Alnitak — 不过，我们可能看不到这两个函数是如何相互调用的。

标签： javascript scope callback

【解决方案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) );
        }
    });
}

【讨论】：

它似乎正在工作。但是 getToolbar 函数是从两个地方调用的。 chartTypes 第一次包含预期值。但它又是空的。我们怎样才能使它成为全局的，这样它就不会变成空的。
@manashb 也许你也有异步问题。您是否在 Ajax 响应返回之前调用 getToolbar，例如 report.getChartTypes(); report.getToolbar();，这将返回 null，因为 Ajax 回调尚未执行。
Paulpro 没有异步问题。 getToolbar 仅在 AJAX 响应返回后调用。但是 AJAX 函数只被调用一次，而 getToolbar 函数被调用了两次。第一次chartType 不为空，但第二次为空。
@manashb 然后必须将其设置回 null 。一旦设置它就不会改变，除非它被重新分配一个新的值。你的report 对象还在范围内吗？ (console.log( report );)
已解决。感谢您的回复。真的很有帮助

【解决方案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 调用也已完成。

【讨论】：