Метод вызова объекта изнутри jQuery.get()

Question

Итак, я попал в модульный javascript, и я наткнулся на блокпост при попытке включить HTTP-запрос jQuery в свой модуль. Я не знаю, как это назвать, поэтому я извиняюсь, если заголовок вводит в заблуждение.

var object = { 
    init: function() { 
     this.loadRequest(); 
    }, 
    loadRequest: function() { 
     $.get('https://myurl.com', function(data) { 
      this.parseRequest.bind(this) 
     }); 
    }, 
    parseRequest: function(data) { 
     console.log(data); 
    } 
}; 

object.init(); 

Когда я пытаюсь это, Chrome говорит мне:

Uncaught TypeError: Cannot read property 'bind' of undefined 

Так что я предполагаю, что это что-то делать с тем, как я связыванием метод моего объекта, но я не могу понять как заставить его работать.

Answer 1

У вас есть некоторые недоразумения относительно того, что на самом деле this относится к другому контексту. Я настоятельно рекомендую вам прочитать https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this, чтобы лучше понять, что означает this, потому что это важная концепция.

Вот исправление к вашему коду. Если вы хотите использовать bind()

var object = { 
    init: function() { 
     this.loadRequest(); 
    }, 
    loadRequest: function() { 
     $.get('https://myurl.com', this.parseRequest.bind(this)); 
    }, 
    parseRequest: function(data) { 
     console.log(data); 
    } 
}; 

object.init(); 

JSFiddle: https://jsfiddle.net/rtbbc74m/

Другой подход обычно используется var self = this (Дополнительная литература: How to use the self with object-oriented javascript and closures):

var object = { 
    init: function() { 
     this.loadRequest(); 
    }, 
    loadRequest: function() { 
     var self = this; 
     $.get('https://myurl.com', function(data) { 
      self.parseRequest(data); 
     }); 
    }, 
    parseRequest: function(data) { 
     console.log(data); 
    } 
}; 

object.init(); 

JSFiddle: https://jsfiddle.net/tz680b1c/