當(dāng)我們使用$()時(shí)到底發(fā)生了什么

1.$是jQuery的別名，$()和jQuery是等價(jià)的

 window.jQuery = window.$ = jQuery;

2.jQuery構(gòu)造函數(shù)

    // Define a local copy of jQuery
    jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
},

在javascript中，構(gòu)造函數(shù)如果有返回值時(shí)，運(yùn)算符 new所創(chuàng)建的對象會被丟棄，返回值將作為new表達(dá)式的值，jQuery利用了這一特性，通過在構(gòu)造函數(shù)jQuery()內(nèi)部用運(yùn)算符new創(chuàng)建并返回另一個(gè)構(gòu)造函數(shù)的實(shí)例，省去了構(gòu)造函數(shù)jQuery()前面的new,即我們創(chuàng)建jQuery對象時(shí)可以省略new,直接寫jQuery()。

3.jQuery.fn和jQuery.prototype 是等價(jià)的

 jQuery.fn = jQuery.prototype

4.既然jQuery()構(gòu)造函數(shù)返回的是jQuery.fn.init()構(gòu)造函數(shù)產(chǎn)生的實(shí)例，那么代碼中所有掛載在jQuery.fn上的函數(shù)，jQuery()創(chuàng)建的實(shí)例是不能調(diào)用的。因?yàn)閖Query(),jQuery.fn.init()兩個(gè)構(gòu)造函數(shù)的原型不一樣產(chǎn)生的實(shí)例也是不同的，jQuery是通過下面的代碼解決的。

// Give the init function the jQuery prototype for later instantiation
init = jQuery.fn.init = function( selector, context, root ) {
    
    
}
init.prototype = jQuery.fn;

5.當(dāng)我們使用$()時(shí)就是返回了一個(gè) 以jQuery.fn.init( selector, context )為構(gòu)造函數(shù)的對象，這個(gè)對象的原型是jQuery.

模仿這個(gè)過程的小例子

    <script type="text/javascript">
        var Q=function(){
            return new Q.fn.init();
        }

        Q.fn=Q.prototype;
        Q.fn.init=function(){
            return this;
        }
        Q.sayhi=function(){
            console.log('hi');
        }
        Q.fn.sayHello=function(){
            console.log('hello');
        }
        Q.fn.init.prototype=Q.prototype;//如果去掉這一行 下面的qq.sayHello() 無法執(zhí)行
        Q.sayhi();
        

        var qq =  Q();
        console.log(qq);
        qq.sayHello();

    </script>

參考資料

1.jQuery技術(shù)內(nèi)幕：深入解析jQuery架構(gòu)設(shè)計(jì)與原理實(shí)現(xiàn) -- 高云