$.Ajax 成功调用原型函数错误 [重复]

Question

可能重复：
$(this) inside of AJAX success not working

我有以下示例代码（JSFiddle 跟随）

AdvancedSearch = function() {
    this.current = 'test';
}

AdvancedSearch.prototype.InitPage = function() {
    var t = this.current;
    this.PrePopulate()

}

AdvancedSearch.prototype.UpdateData= function() {
    alert(this.current);
}

AdvancedSearch.prototype.PrePopulate = function() {
    this.UpdateData();

    $.ajax({
        url: 'http://fiddle.jshell.net/',
        success: function(msg) {
            this.UpdateData();
        }
    });
}

var as = new AdvancedSearch();
as.InitPage();​

我在那里有“http://fiddle.jshell.net”，因此请防止他们网站上出现 Access-Control-Allow-Origin 错误。

执行此代码时，出现以下错误：

Uncaught TypeError: Object # has not method 'UpdateData'

如果你执行JSFiddle，你会发现在调用PrePopulate的时候，它运行函数开头的this.UpdateData()就好了。但是，一旦 Ajax 调用完成，您就会收到错误消息。

对为什么会发生这种情况有任何想法吗？也许我以错误的方式处理这个问题。任何见解都会有所帮助。

这是我的 JSFiddle：http://jsfiddle.net/B4NRY/2/

Answer 1

您给 $.ajax 的回调不会以您的 AdvancedSearch 实例作为上下文 (this) 来调用。

解决方案 1（适用于所有类似的回调问题）：

AdvancedSearch.prototype.PrePopulate = function() {
    this.UpdateData();
    var that = this; // register the that variable in the closure of the callback
    $.ajax({
        url: 'http://fiddle.jshell.net/',
        success: function(msg) {
            that.UpdateData();
        }
    });
}

解决方案 2（特定于 $.ajax，但非常干净，感谢 Felix）：

AdvancedSearch.prototype.PrePopulate = function() {
    this.UpdateData();
    $.ajax({
        url: 'http://fiddle.jshell.net/',
        context: this,
        success: function(msg) {
            this.UpdateData();
        }
    });
}