2016-01-04 3 views
-1

Пожалуйста, обратитесь в приведенном ниже примере кодаКак мы можем сделать свойство JavaScript глобальным?

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. Даже я инициализировал то же самое в начале. Может быть вопрос о масштабах. Пожалуйста, порекомендуйте.

+0

Об этом ответе уже здесь: http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript –

+2

@NeilMunro это * не * в первую очередь проблема с областью - это проблема async. – Alnitak

+0

Кажется, вы присваиваете значение переменной chartTypes внутри обратного вызова успеха AJAX. Поэтому перед вызовом функции getToolbar, которая считывает эту переменную, вы должны убедиться, что функция 'getChartTypes' была вызвана, и запрос AJAX успешно завершил выполнение. –

ответ

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)); 
     } 
    }); 
} 
+0

Кажется, что работает. Но функция getToolbar вызывается из двух мест. Впервые chartTypes содержит ожидаемое значение. Но опять же это нулевое значение. Как мы можем сделать его глобальным, чтобы он не стал пустым. – manashb

+0

@manashb Возможно, у вас есть проблема с асинхронностью. Вы вызываете 'getToolbar' до того, как возвращается ответ Ajax, например' report.getChartTypes(); report.getToolbar(); ', который возвращает null, так как обратный вызов Ajax еще не выполнен. – Paulpro

+0

Paulpro нет проблемы с асингом. getToolbar вызывается только после ответа AJAX. Но функция AJAX вызывается только один раз, а функция getToolbar вызывается два раза. Первый тип chartType не пуст, но второй раз он пуст. – manashb

0

С объектно-ориентированным подходом, большинство разработчиков будут используйте метод и используйте .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 также была завершена.

Смежные вопросы