Jak wywołać metodę wewnątrz JavaScript Object

Question

Właśnie uczę się, jak najlepiej zorganizować mój kod JavaScript, a miałem pytanie odnośnie tego małego kawałka kodu I napisał:

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

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

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

pytanie brzmi dotyczące wywoływania innej funkcji ReportControllerIndex z poziomu obiektu reportControllerIndex. Najpierw wypróbowałem następujący fragment kodu dla funkcji uruchamiania:

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

który działał idealnie. Ja jednak wtedy szybko znalazł robi to dla funkcji drawMap:

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

nie działa, ponieważ „to” będzie teraz odnoszą się do funkcji wywołania zwrotnego wywołania getJSON.

Moim rozwiązaniem było umieszczenie raportuControllerIndex przed wszystkimi metodami, które chcę wywołać, ale byłem ciekawy: czy istnieje bardziej względny sposób wywoływania funkcji w ramach całego obiektu takiego jak ten (podobnie jak w przypadku z klasą w standardowym języku OO)? Czy jestem zmuszony zrobić to tak jak obecnie, po prostu wywołując metody poprzez nazwę obiektu?

Answer 1

Chcesz zapisać wiązanie this w zmiennej.

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

Answer 2

Trzeba użyć zmiennej odniesienie do this poza funkcją getJSON. getJSON ustawia kontekst wywołania zwrotnego w obrębie jquery.

Jak to:

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

Answer 3

Późne odpowiedź, ale jQuery ma metodę called jQuery.proxy() który jest wykonany do tego celu. Przekazujesz tę funkcję wraz z wartością this, którą chcesz zachować, i zwróci ona funkcję, która zapewnia poprawność this.

W ten sposób nie trzeba definiować zmiennej.

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

Answer 4

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

podczas definiowania funkcji można po prostu dodać .bind (to), aby ustawić właściwy kontekst dla tej funkcji.

Answer 5

Można go napisać lubi to:

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(); 
    } 
}; 

Klasa ta działa tak samo jak ty, i nadal można wywołać metodę klasy przez:

reportsControllerIndex.run() 

W tym paradygmacie, ja zdefiniowano self wskazując na samą klasę, dzięki czemu możesz dzwonić pod numer self w dowolnym miejscu na zajęciach.

---

Dalej, ten paradygmat może rozwiązać problem this w funkcji, że wprowadzą jako callback do innej funciton:

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