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

網路上有很多關於jQuery的this和$(this)的介紹，大多數只是理清了this和$(this)的指向，其實它是有應用場所的，不能一概而論在jQuery調用成員函數時， this就是指向dom對象。

$(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()　--　成員函數

複製程式碼 程式碼如下:

隱藏：函數（）{ 
        返回顯示隱藏（此）； 
    }, 
 函數 showHide( elements, show ) {var elem, display, 
        值= []，
        索引 = 0，
        長度=元素.長度； 
    for ( ; 索引         elem = 元素[ 索引 ]; 
        if ( !elem.style ) { 
            續; 
        } 
        值[索引] = jQuery._data( elem, "olddisplay" ); 
        若（顯示）{ 
            // 重設此元素的內嵌顯示以了解它是否為
            // 是否已隱藏於連鎖規則
            if ( !values[ index ] && elem.style.display === "none" ) { 
                elem.style.display = ""; 
            } 
            // 設定 被 display: none 覆蓋的元素
            // 在樣式表中設定為預設瀏覽器樣式
            // 對於這樣的元素
            if ( elem.style.display === "" && isHidden( elem ) ) { 
                值[索引] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) ); 
            } 
        } 其他 { 
            顯示 = curCSS( elem, "顯示" ); 
            if ( !values[ 索引 ] && 顯示 !== "none" ) { 
                jQuery._data( elem, "olddisplay", 顯示 ); 
            } 
        } 
    } 
    // 設定第二個循環中大部分元素的顯示
    // 避免持續回流
    for ( 索引 = 0; 索引         elem = 元素[ 索引 ]; 
        if ( !elem.style ) { 
            續; 
        } 
        if ( !show || elem.style.display === "none" || elem.style.display === "" ) { 
            elem.style.display = 顯示？值[索引]|| ““ ： “沒有任何”; 
        } 
    } 
    返回元素； 
} 

從上面的程式碼可以看出hide行數其實呼叫的是showHide，而確定的第一個參數this，不是dom對象，而是jQuery物件數組，showHide函數透過循環這個物件數組取得每個一個dom對象。

最後看看$("p").bind()

複製程式碼程式碼如下：

結合：函數（類型，數據，fn）{ 
        回傳 this.on( 類型, null, 資料, 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物件了。

以上就是個人對於jQuery中this與$(this)的理解了，如有什麼紕漏，請聯絡我或給我留言