Как вызвать метод внутри объектов JavaScript

Question

Я просто узнать о том, как лучше организовать свой код яваскрипта, и у меня возник вопрос по поводу этой небольшой кусок кода, который я написал:

var reportsControllerIndex = { 
    plotMapPoints: function(data) { 
     //plots points 
    }, 

    drawMap: function() { 
     $.getJSON('/reports.json', function(data) { 
      reportsControllerIndex.plotMapPoints(data);   
     }); 
    }, 

    run: function() { 
     reportsControllerIndex.drawMap(); 
    } 
}; 

вопрос является относительно вызова другой функции reportsControllerIndex из объекта reportsControllerIndex. Сначала я попробовал следующую часть кода для функции запуска:

run: function() { 
    this.drawMap(); 
} 

который работал отлично. Тем не менее, я тогда быстро нашел делаю это для функции drawMap:

drawMap: function() { 
    $.getJSON('/reports.json', function(data) { 
     this.plotMapPoints(data);   
    }); 
} 

не работает, так как «это» теперь будет ссылаться на функцию обратного вызова вызова getJSON.

Мое решение состояло в том, чтобы просто поставить reportsControllerIndex перед всеми методами, которые я хочу вызвать, но мне было любопытно: существует ли более относительный способ вызова функций внутри общего объекта, подобного этому (как и вы, с классом в стандартном языке OO)? Или я вынужден сделать это, как и сейчас, просто вызывая методы через имя объекта?

Answer 1

Вы хотите сохранить привязку к переменной.

drawMap: function() { 
    var _this = this; 
    $.getJSON('/reports.json', function(data) { 
     _this.plotMapPoints(data);   
    }); 
} 

Answer 2

Вы должны использовать переменную ссылку на this вне функции getJSON. getJSON задает контекст обратного вызова в jquery.

Как это:

var self = this; 
$.getJSON('/reports.json', function(data) { 
    self.plotMapPoints(data);   
}); 

Answer 3

поздний ответ, но JQuery имеет метод called jQuery.proxy(), который сделан для этой цели. Вы передаете ему функцию вместе со значением , которое хотите сохранить, и оно вернет функцию, гарантирующую корректность this.

Таким образом, вам не нужно определять переменную.

drawMap: function() { 
    $.getJSON('/reports.json', $.proxy(function(data) { 
     this.plotMapPoints(data);   
    }, this)); 
} 

Answer 4

plotMapPoints: function(data) { 
    //plots points 
}.bind(this) 

при определении вашей функции вы можете просто добавить .bind (это), чтобы установить правильный контекст для этой функции.

Answer 5

Вы можете написать его любит это:

var reportsControllerIndex = new function() { 

    var self = this; 

    self.plotMapPoints = function (data) { 
     //plots points 
    }, 

    self.drawMap = function() { 
     $.getJSON('/reports.json', function (data) { 
      self.plotMapPoints(data);   
     }); 
    }, 

    self.run = function() { 
     self.drawMap(); 
    } 
}; 

Этот класс работает так же, как вы делали, и вы все еще можете вызвать метод класса по:

reportsControllerIndex.run() 

В этой парадигме, я self, указывая на сам класс, чтобы вы могли звонить self, где бы вы ни находились в классе.

---

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

plotMapPoints: function(data) { 
    console.log(this); 
    // Need a this referring to the class itself 
    // It's inconvenient to bring this as parameter 
},