Javascript對象原型掉出範圍

Question

我目前正在編寫一個小的Javascript對象，它將點擊偵聽器添加到某些元素上，然後觸發對PHP函數的AJAX調用。這一切都工作正常，但是，我想在AJAX響應時調用一個函數。我通過向AJAX調用傳遞一個函數來實現這個功能，當發出響應時會觸發這個函數。

我遇到的問題是，當通過protoytype作爲回調（以阻止AJAX調用可能發生的異步問題）時，我正在丟失對象的範圍。 'this'對象（或self）被設置爲窗口而不是我創建的對象的實例。這裏是我的代碼：

//Rating Submit 
var Rater = function(element, videoId, ratingStars, userId) { 
    this.userId = userId, 
    this.element = element; 
    this.videoId = videoId; 
    this.ratingStars = ratingStars; 
    var self = this; 

    jQuery(this.ratingStars).click(function(e) { 
     e.preventDefault(); 
     self.ratingClick(this, self.changeStar); 
    }); 
} 

Rater.prototype.ratingClick = function(item, changeStar) { 
    jQuery.ajax({ 
     type  : 'post', 
     dataType : 'json', 
     url  : 'api/rate-video', 
     data  : "userId=" + this.userId + "&videoId=" + this.videoId + "&rating=" + jQuery(item).attr("data-score"), 
     success : function(data) { 
      changeStar(data, item);  
     } 
    }); 
} 

Rater.prototype.changeStar = function(response, item) { 
    var maxCount = jQuery(item).attr("data-score"); 
    //console.log(self); 
    jQuery(self.ratingStars).each(function(key, value) { 
     alert(key); 
    }); 
} 

正如你所看到的，我加入「self.changestar」原型功能的AJAX調用此當給出的迴應被調用。當我嘗試訪問該特定實例的構造函數中設置的任何變量時，它表示它是Window對象而不是該類的實例。是否有可能通過原型函數作爲實例內的回調？我希望我已經解釋自己確定....

感謝

Answer 1

的問題是，當你這樣做：

self.ratingClick(this, self.changeStar); 

你正是你在Rating曾與jQuery的點擊同樣的問題回調，你用你的self變量解決：只有函數引用changeStar通過，沒有關於調用它時使用什麼值this。

一種解決方案是使用Function#bind，你在一個函數調用來找回，調用它時，會調用原始與特定this值（和可選參數）的另一個功能：

self.ratingClick(this, self.changeStar.bind(self)); 

或者，你可以傳遞價值爲this單獨使用：

self.ratingClick(this, self.changeStar, self); 

...然後在成功處理程序使用Function#call：

Rater.prototype.ratingClick = function(item, changeStar, thisArg) { // <== Change here 
    jQuery.ajax({ 
     type  : 'post', 
     dataType : 'json', 
     url  : 'api/rate-video', 
     data  : "userId=" + this.userId + "&videoId=" + this.videoId + "&rating=" + jQuery(item).attr("data-score"), 
     success : function(data) { 
      changeStar.call(thisArg, data, item);     // <=== And here 
     } 
    }); 
}