jQuery AJAX回調函數this指向問題
2024-05-06 14:11:34
供稿：網友
如在全局作用域調用一個含this的對象，此時當前對象的this指向的是window。為了讓this的指向符合自己的意愿，JavaScript提供了兩個方法用以改變this的指向，它們是call和apply，當然也有利用閉包來實現的方法。本文通過一個例子來說明這些問題。
先看一段演示代碼，這代碼只供演示用，沒有實際意義。
代碼如下:
//一個沒有實際意義的socket連接對象
var socket =
{
connect: function(host, port)
{
alert('Connecting socket server,host:' + host + ',port:' + port);
}
};
//一個即時通訊類，其中connect方法還將作為AJAX回調函數被調用
function classIm()
{
this.host = '192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(this.host, this.port);
};
}
//實例化即時通訊類
var IM = new classIm();
//AJAX請求，這里假設要打開socket連接首先要通過WEB得知用戶WEB登錄成功
$.get('CheckWebLogin.aspx', IM.connect);
運行上面的例子，你將看到彈出的host與port都是undefined，那是因為回調函數的this不是指向IM對象，而是jQuery的AJAX配置對象ajaxSettings。在jQuery內部是用s.success代替傳入的回調函數去執行的，而success的調用對象就是s，即下面ajaxSettings對象的縮寫。
ajaxSettings:
{
url: location.href,
global: true,
type: "GET",
contentType: "application/x-www-form-urlencoded",
processData: true,
async: true
}
為了證明這一點，你可以這樣修改代碼測試一下，你將看到是url、global、type、contentType等對象的屬性名稱：
代碼如下:
this.connect = function(data)
{
for (var key in this)
{
alert(key);
}
}
現在了解了問題所在，接下來想辦法解決這個問題。其實我們的目的是希望AJAX回調函數代碼socket.connect(this.host, this.port)中的this指向類classIm的實例對象IM，或者說是想socket.connect()方法能得到正確的參數值吧。為了得到預期的AJAX回調函數執行結果，我分析了大致有下面幾種方法：
方法一
直接傳對象的正確引用而非this指針，或叫對象實傳。這是最常見的做法，即在類實例化時用一個變量存儲對當前對象的引用，在后面的方法中直接使用此變量代替this的使用。注意：這種方法并沒有真正改變this的指向。演示代碼如下，注意對比前后兩次代碼的區別，我也特別高亮顯示差異部分代碼。
代碼如下:
var socket =
{
connect: function(host, port)
{
alert('Connecting socket server,host:' + host + ',port:' + port);
}
};
function classIm()
{
var self = this;
this.host = '192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(self.host, self.port);
};
}
var IM = new classIm();
