詳談jQuery中的this和$(this)_jquery

$(this)指向jQuery對象是無可厚非的，但this就是指向dom對象，這個是因為jQuery做了特殊的處理。　

在創建dom的jQuery對象時，jQuery不僅僅為dom創建一個jQuery對象，而且還將dom存儲在所創建對象的數組中。

代碼如下:
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這條語句就是實現對象數組。所以javascript是很有意思的語言，使用this訪問時，可以訪問它所指向的對象的成員函數，而其實this又是一個對象數組。其存放的是dom對象。

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

代碼如下:
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}

看了each函數的調用大家應該明白，jQuery.each( this, callback, args );調用的是對象數組，而對象的數組存儲的是dom對象，因此在callback函數中的this自然是dom對象了

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

代碼如下:
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行數其實調用的是showHide，而傳入的第一個參數this，并不是dom對象，而是jQuery對象數組，因此showHide函數通過循環此對象數組獲取每一個dom對象。

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

代碼如下:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},

代碼如下:
on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
// 此部分代碼省略
return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
});
},

bind函數調用的是 on函數，而on函數又是通過 each函數實現了jQuery.event.add。因此　jQuery.event.add( this中的this也就是dom對象了。所以事件中的this也就是dom對象了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com