快捷導(dǎo)航

詳談jQuery中的this和$(this)

更新時(shí)間：2014年11月13日 09:44:46 投稿：hebedich

在使用jquery操作js時(shí)，經(jīng)常弄不明白this與$(this)。最近不是很忙，抽空仔細(xì)研究了一下，記錄下來(lái)以供在忘記的時(shí)候拉出來(lái)參考參考！

網(wǎng)上有很多關(guān)于jQuery的this和$(this)的介紹，大多數(shù)只是理清了this和$(this)的指向，其實(shí)它是有應(yīng)用場(chǎng)所的，不能一概而論在jQuery調(diào)用成員函數(shù)時(shí)，this就是指向dom對(duì)象。

$(this)指向jQuery對(duì)象是無(wú)可厚非的，但this就是指向dom對(duì)象，這個(gè)是因?yàn)閖Query做了特殊的處理?！?/p>

在創(chuàng)建dom的jQuery對(duì)象時(shí)，jQuery不僅僅為dom創(chuàng)建一個(gè)jQuery對(duì)象，而且還將dom存儲(chǔ)在所創(chuàng)建對(duì)象的數(shù)組中。

復(fù)制代碼代碼如下:

elem = document.getElementById(match[2]);  

if (elem && elem.parentNode) {  

  this.length = 1;  

  this[0] = elem;  

}  

this.context = document;  

this.selector = selector;  

return this;

this[0] = elem這條語(yǔ)句就是實(shí)現(xiàn)對(duì)象數(shù)組。所以javascript是很有意思的語(yǔ)言，使用this訪問時(shí)，可以訪問它所指向的對(duì)象的成員函數(shù)，而其實(shí)this又是一個(gè)對(duì)象數(shù)組。其存放的是dom對(duì)象。

先看看 $("p").each() -- 循環(huán)

復(fù)制代碼代碼如下:

each: function( callback, args ) {  

        return jQuery.each( this, callback, args );  

    }  

看了each函數(shù)的調(diào)用大家應(yīng)該明白，jQuery.each( this, callback, args );調(diào)用的是對(duì)象數(shù)組，而對(duì)象的數(shù)組存儲(chǔ)的是dom對(duì)象，因此在callback函數(shù)中的this自然是dom對(duì)象了

再看看$("p").hide()　--　成員函數(shù)

復(fù)制代碼代碼如下:

hide: function() {  

        return showHide( this );  

    },  

 function showHide( elements, show ) {var elem, display,  

        values = [],  

        index = 0,  

        length = elements.length;  

    for ( ; index < length; index++ ) {  

        elem = elements[ index ];  

        if ( !elem.style ) {  

            continue;  

        }  

        values[ index ] = jQuery._data( elem, "olddisplay" );  

        if ( show ) {  

            // Reset the inline display of this element to learn if it is  

            // being hidden by cascaded rules or not  

            if ( !values[ index ] && elem.style.display === "none" ) {  

                elem.style.display = "";  

            }  

            // Set elements which have been overridden with display: none  

            // in a stylesheet to whatever the default browser style is  

            // for such an element  

            if ( elem.style.display === "" && isHidden( elem ) ) {  

                values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );  

            }  

        } else {  

            display = curCSS( elem, "display" );  

            if ( !values[ index ] && display !== "none" ) {  

                jQuery._data( elem, "olddisplay", display );  

            }  

        }  

    }  

    // Set the display of most of the elements in a second loop  

    // to avoid the constant reflow  

    for ( index = 0; index < length; index++ ) {  

        elem = elements[ index ];  

        if ( !elem.style ) {  

            continue;  

        }  

        if ( !show || elem.style.display === "none" || elem.style.display === "" ) {  

            elem.style.display = show ? values[ index ] || "" : "none";  

        }  

    }  

    return elements;  

}

從上面的代碼可以看出hide行數(shù)其實(shí)調(diào)用的是showHide，而傳入的第一個(gè)參數(shù)this，并不是dom對(duì)象，而是jQuery對(duì)象數(shù)組，因此showHide函數(shù)通過(guò)循環(huán)此對(duì)象數(shù)組獲取每一個(gè)dom對(duì)象。

最后看看$("p").bind()　--　事件

復(fù)制代碼代碼如下:

bind: function( types, data, fn ) {  

        return this.on( types, null, data, fn );  

    },  

復(fù)制代碼代碼如下:

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {  

        // 此部分代碼省略  

        return this.each( function() {  

            jQuery.event.add( this, types, fn, data, selector );  

        });  

    },

bind函數(shù)調(diào)用的是 on函數(shù)，而on函數(shù)又是通過(guò) each函數(shù)實(shí)現(xiàn)了jQuery.event.add。因此　jQuery.event.add( this中的this也就是dom對(duì)象了。所以事件中的this也就是dom對(duì)象了。

以上就是個(gè)人對(duì)于jQuery中this與$(this)的理解了，如有什么紕漏，請(qǐng)聯(lián)系我或者給我留言

您可能感興趣的文章: