欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery中this的指向詳解

 更新時(shí)間：2022年05月16日 14:11:22   作者：springsnow  
本文詳細(xì)講解了JQuery中this的指向，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

JavaScript中的this不總是指向當(dāng)前對(duì)象，函數(shù)或類中的this指向與調(diào)用這個(gè)函數(shù)的對(duì)象以及上下文環(huán)境是息息相關(guān)的。

如在全局作用域調(diào)用一個(gè)含this的對(duì)象，此時(shí)當(dāng)前對(duì)象的this指向的是window。

為了讓this的指向符合自己的意愿，JavaScript提供了兩個(gè)方法用以改變this的指向，它們是call和apply，當(dāng)然也有利用閉包來實(shí)現(xiàn)的方法。

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

一、Ajax回調(diào)函數(shù)中的this

默認(rèn)情況下指向AJAX配置對(duì)象ajaxSettings。

在jQuery內(nèi)部是用s.success代替?zhèn)魅氲幕卣{(diào)函數(shù)去執(zhí)行的，而success的調(diào)用對(duì)象就是s，即ajaxSettings對(duì)象的縮寫。

var socket =
{
    connect: function(host, port)
    {
        alert('Connecting socket server,host:' + host + ',port:' + port);
    }
};

//一個(gè)即時(shí)通訊類，其中connect方法還將作為AJAX回調(diào)函數(shù)被調(diào)用
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回調(diào)函數(shù)代碼socket.connect(this.host, this.port)中的this指向類classIm的實(shí)例對(duì)象IM，或者說是想socket.connect()方法能得到正確的參數(shù)值，大致有下面幾種方法：

1、設(shè)置ajax的context選項(xiàng)

將Ajax回調(diào)函數(shù)中的this指向?qū)ο驣M。

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

2、調(diào)用$.proxy

改變函數(shù)內(nèi)this的指向

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

3、對(duì)象實(shí)傳

直接傳對(duì)象的正確引用而非this指針

這是最常見的做法，即在類實(shí)例化時(shí)用一個(gè)變量存儲(chǔ)對(duì)當(dāng)前對(duì)象的引用，在后面的方法中直接使用此變量代替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加閉包

實(shí)現(xiàn)真正改變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);};
    };

}
//調(diào)用：
var IM = new classIm();
$.get('CheckWebLogin.aspx', IM.connect.Proxy(IM));

5、添加函數(shù)包裝器

在匿名回調(diào)函數(shù)中再調(diào)用實(shí)際的回調(diào)處理函數(shù)。不建議使用。

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

二、jQuery事件綁定回調(diào)函數(shù)中的this

指向event.currentTarget，即附著這個(gè)函數(shù)的DOM對(duì)象。

1、可以在函數(shù)綁定時(shí)傳遞參數(shù)：

$('#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));

到此這篇關(guān)于JQuery中this指向的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論