首页 / 脚本样式 / JavaScript / 详谈jQuery中的this和$（this）

网上有很多关于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（） -- 成员函数
复制代码 代码如下:
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对象了。

以上就是个人对于jQuery中this与$（this）的理解了，如有什么纰漏，请联系我或者给我留言