JQuery中this的指向詳解

2022-05-16 16:00:13

JavaScript中的this不總是指向當前物件，函數或類中的this指向與呼叫這個函數的物件以及上下文環境是息息相關的。

如在全域性作用域呼叫一個含this的物件，此時當前物件的this指向的是window。

為了讓this的指向符合自己的意願，JavaScript提供了兩個方法用以改變this的指向，它們是call和apply，當然也有利用閉包來實現的方法。

在Jquery 中的this的指向是怎麼樣的呢？

一、Ajax回撥函數中的this

預設情況下指向AJAX設定物件ajaxSettings。

在jQuery內部是用s.success代替傳入的回撥函數去執行的，而success的呼叫物件就是s，即ajaxSettings物件的縮寫。

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();
$.get('CheckWebLogin.aspx', IM.connect);
//彈出的host與port都是undefined。

如果希望AJAX回撥函數程式碼socket.connect(this.host, this.port)中的this指向類classIm的範例物件IM，或者說是想socket.connect()方法能得到正確的引數值，大致有下面幾種方法：

1、設定ajax的context選項

將Ajax回撥函數中的this指向物件IM。

$.ajax({
    context:IM,
    type:'get',
    ulr:」page.html」,
    success:IM.connect
})

2、呼叫$.proxy

改變函數內this的指向

$.get(」page.html」,$.proxy(IM.context,IM))

3、物件實傳

直接傳物件的正確參照而非this指標

這是最常見的做法，即在類範例化時用一個變數儲存對當前物件的參照，在後面的方法中直接使用此變數代替this的使用。注意：這種方法並沒有真正改變this的指向。

function classIm()
{
    var self = this;
    this.host = '192.168.1.28';
    this.port = '8080';
    this.connect = function(data)
    {
        socket.connect(self.host, self.port);
    };
}

4、使用apply加閉包

實現真正改變this的指向。

這種方法是很多JavaScript框架的做法。

Function.prototype.Proxy = function(thisObj)
{
    var _method = this;
    return function(data)
    {
        return _method.apply(thisObj,[data]);
       //或者
       return  function()
       {ret _fn.apply(thisObj,arguments);};
    };

}
//呼叫：
var IM = new classIm();
$.get('CheckWebLogin.aspx', IM.connect.Proxy(IM));

5、新增函數包裝器

在匿名回撥函數中再呼叫實際的回撥處理常式。不建議使用。

$.get('page.html', function(data){
    IM.connect(data)
});

二、jQuery事件繫結回撥函數中的this

指向event.currentTarget，即附著這個函數的DOM物件。

1、可以在函數繫結時傳遞引數：

$('#a').bind('click'{self:this},this.onClick);

function onClick(event){
  var self=event.data.self;
}

2、可以使用上面的2、3、4、5中方法改變this的指向。

$("#a").click($.proxy(myFun,this));
//或 
$("#a").click(myFun.Proxy(this));

到此這篇關於JQuery中this指向的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。