javascript - 在对象内调用时函数不起作用

Question

我有以下代码:

// auto_suggest.js
function AutoSuggest(textboxElem, resultElem, url) {
    this.textboxElem = textboxElem;
    this.resultElem  = resultElem;
    this.url         = url;
    this.registerEvent();
}

AutoSuggest.prototype = {
    registerEvent: function() {
        this.textboxElem.onkeyup = this.getSuggestions;
    },
    getSuggestions: function() {
        // This doesn't work either: this.loadResponse("some data");
        $.get(this.url, { text: this.textboxElem.value }, this.loadResponse);
    },
    loadResponse: function(data) {
        // Not called
        this.resultElem.innerHTML = data;
    }
};

// suggest.html
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="auto_suggest.js" type="text/javascript"></script>

<script>
$(function() {
    var suggest = new AutoSuggest(document.getElementById("suggest"), 
                                  document.getElementById("result"), 
                                  "result.txt");
        // This DOES work: suggest.loadResponse("123");
});
</script>

<input type="text" id="suggest" /><br>
<div id="result"></div>

函数loadResponse 拒绝从对象内部调用，但从外部它没问题。可能是什么问题？

Answer 1

默认情况下，AJAX 回调 (AutoSuggest.loadResponse) 传递 jqXHR 对象作为其上下文(this 值)。您需要通过将 context 选项传递给 $.ajax 来覆盖它.用这个替换你的 $.get 函数:

$.ajax({
    url: this.url,
    type: 'GET',
    data: { text: this.textboxElem.value },
    success: this.loadResponse,
    context: this
});

这使得 jQuery 将 this 设置为正确的值。