Javascript 对象原型(prototype)超出范围

Question

我目前正在编写一个小型 Javascript 对象，它将在某些元素上添加点击监听器，然后触发对 PHP 函数的 AJAX 调用。这一切都很好，但是，我想在 AJAX 响应时调用一个函数。我通过将一个函数传递给 AJAX 调用来实现这一点，该调用将在给出响应时触发。

我遇到的问题是，当作为回调传递原型(prototype)类型时，我失去了对象的范围(为了停止 AJAX 调用可能发生的异步问题)。 “this”对象(或自身)设置为窗口，而不是我创建的对象的实例。这是我的代码:

    //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”原型(prototype)函数传递给 AJAX 调用，以便在给出响应时调用它。但是，当我尝试访问我在构造函数中为该特定实例设置的任何变量时，它说它是 Window 对象而不是该类的实例。是否可以通过原型(prototype)函数作为实例内部的回调？我希望我已经解释清楚了....

谢谢

Answer 1

问题是当你这样做的时候:

self.ratingClick(this, self.changeStar);

您在使用 jQuery 点击回调的 Rating 中遇到了完全相同的问题，您使用 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
        }
    });
}