javascript проблема с пространством имен, «это» и библиотека

Question

Я строю страницу визуализации (с dc.js), для которой я решил сделать прыжок и собрать все это в одно пространство имен. Исходя из простоты Python, сбой с безумием области JavaScript был достаточно жестким, поэтому, пожалуйста, несите меня.

У меня есть общая структура JS следующим образом:

var NamespaceClass = function() { 

    this.var0 = "something"; 
    this.var1 = dc.SomeChartClass("#some-css-selector"); 

    this.setup = function(error, config, dataset) { 
     console.log("Inside setup:", this); 
     this.var2 = this.process_data(dataset); 
     // Do some more stuff... 
    } 

    this.process_data = function(data) { 
     var whatever; 
     //Do stuff with "data"... 
     return whatever; 
    } 

    this.start = function() { 
     console.log("Inside start:", this); 
     var q; 

     q = queue().defer(d3.json, "config.json") 
        .defer(d3.csv, "data.csv"); 
     q.await(this.setup); 
    } 
} 

var MyNamespace = new NamespaceClass(); 
MyNamespace.start(); 

где queue является Mike Bostock's queue lib для асинхронного файла очереди. Когда я пытаюсь проверить сценарий, я получаю в консоли:

Inside start: Object { var0 = "something", var1={...}, more...} 
Inside setup: Window testpage.html 
TypeError: this.process_data is not a function 

Таким образом, применение setup из q.await делает его потерять сферу объекта (или что это называется в JavaScript ...). Как я могу избежать этого? Я также пробовал использовать прокси-объект вроде:

this.start = function() { 
     console.log("Inside start:", this); 
     var q, proxy; 

     q = queue().defer(d3.json, "config.json") 
        .defer(d3.csv, "data.csv"); 
     proxy = this.setup; 
     q.await(proxy); 
    } 

не имеет никакого отношения!

Answer 1

Значение this определяется путем вызова функции, которая ее содержит. Вы не можете контролировать, как вызывается функция setup, так как она вызывается внутри функции q.await.

Когда вы делаете q.await(this.setup), вы передаете ссылку на настройку функции, но «теряете» любое соединение с вашим пространством имен. Вы должны связать функцию с пространством имен для того, чтобы иметь надлежащее this значения:

q.await(this.setup.bind(this)); 

Даже лучше, так как все ваши функции работают только тогда, когда this является пространство имен, вы должны связать их с пространством имен, как это:

this.start = function() { 
    // body 
}.bind(this); 

// usage: 
q.await(this.setup); 

И теперь везде, где вы передаете их, они будут иметь правильный this внутри.

Примечание: в этой ситуации, bind работает что-то вроде этого:

this.start = function() { 
    var namespace = this; 

    q.await(function(){ namespace.setup(); }); 
}