日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

JQuery中this的指向詳解_jquery

作者：springsnow ? 更新時間： 2022-07-09 編程語言

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));

原文鏈接：https://www.cnblogs.com/springsnow/p/9461756.html

欄目分類
最近更新