摘要：匿名函數(shù)將代碼包裹在里面，防止與其他代碼沖突和污染全局環(huán)境。學(xué)習(xí)整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫(kù)讀者發(fā)現(xiàn)有不妥或可改善之處，歡迎評(píng)論指出。

雖然現(xiàn)在基本不怎么使用jQuery了，但jQuery流行10多年的JS庫(kù)，還是有必要學(xué)習(xí)它的源碼的。也可以學(xué)著打造屬于自己的js類庫(kù)，求職面試時(shí)可以增色不少。

本文章學(xué)習(xí)的是v3.4.1 版本。
unpkg.com源碼地址：https://unpkg.com/jquery@3.4....

jQuery github倉(cāng)庫(kù)

(function(global, factory){

})(typeof window !== "underfined" ? window: this, function(window, noGlobal){

});

外界訪問(wèn)不到里面的變量和函數(shù)，里面可以訪問(wèn)到外界的變量，但里面定義了自己的變量，則不會(huì)訪問(wèn)外界的變量。
匿名函數(shù)將代碼包裹在里面，防止與其他代碼沖突和污染全局環(huán)境。
關(guān)于自執(zhí)行函數(shù)不是很了解的讀者可以參看這篇文章。
[[譯] JavaScript：立即執(zhí)行函數(shù)表達(dá)式（IIFE）](https://segmentfault.com/a/11...

瀏覽器環(huán)境下，最后把$ 和 jQuery函數(shù)掛載到window上，所以在外界就可以訪問(wèn)到$和jQuery了。

if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
}
// 其中`noGlobal`參數(shù)只有在這里用到。

commonjs實(shí)現(xiàn) 主要代表 nodejs

// global是全局變量，factory 是函數(shù)
( function( global, factory ) {

    //  使用嚴(yán)格模式
    "use strict";
    // Commonjs 或者 CommonJS-like  環(huán)境
    if ( typeof module === "object" && typeof module.exports === "object" ) {
        // 如果存在global.document 則返回factory(global, true);
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

// Pass this if window is not defined yet
// 第一個(gè)參數(shù)判斷window，存在返回window，不存在返回this
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {});

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}

很遺憾，jQuery源碼里沒(méi)有暴露對(duì)seajs的支持。但網(wǎng)上也有一些方案。這里就不具體提了。畢竟現(xiàn)在基本不用seajs了。

實(shí)際上也是可以 new的，因?yàn)?b>jQuery是函數(shù)。而且和不用new效果是一樣的。
new顯示返回對(duì)象，所以和直接調(diào)用jQuery函數(shù)作用效果是一樣的。
如果對(duì)new操作符具體做了什么不明白?？梢詤⒖次抑皩?xiě)的文章。

面試官問(wèn)：能否模擬實(shí)現(xiàn)JS的new操作符

源碼：

 var
    version = "3.4.1",

    // Define a local copy of jQuery
    jQuery = function( selector, context ) {
        // 返回new之后的對(duì)象
        return new jQuery.fn.init( selector, context );
    };
jQuery.fn = jQuery.prototype = {
    // jQuery當(dāng)前版本
    jquery: version,
    // 修正構(gòu)造器為jQuery
    constructor: jQuery,
    length: 0,
};
init = jQuery.fn.init = function( selector, context, root ) {
    // ...
    if ( !selector ) {
        return this;
    }
    // ...
};
init.prototype = jQuery.fn;

jQuery.fn === jQuery.prototype;     // true
init = jQuery.fn.init;
init.prototype = jQuery.fn;
// 也就是
jQuery.fn.init.prototype === jQuery.fn;     // true
jQuery.fn.init.prototype === jQuery.prototype;     // true

關(guān)于這個(gè)筆者畫(huà)了一張jQuery原型關(guān)系圖，所謂一圖勝千言。

console.log({jQuery});
// 在谷歌瀏覽器控制臺(tái)，可以看到j(luò)Query函數(shù)下掛載了很多靜態(tài)屬性和方法，在jQuery.fn 上也掛著很多屬性和方法。

Vue源碼中，也跟jQuery類似，執(zhí)行的是Vue.prototype._init方法。

function Vue (options) {
    if (!(this instanceof Vue)
    ) {
        warn("Vue is a constructor and should be called with the `new` keyword");
    }
    this._init(options);
}
initMixin(Vue);
function initMixin (Vue) {
    Vue.prototype._init = function (options) {};
};

用法：

jQuery.extend( target [, object1 ] [, objectN ] )        Returns: Object

jQuery.extend( [deep ], target, object1 [, objectN ] )

jQuery.extend API
jQuery.fn.extend API

看幾個(gè)例子：
（例子可以我放到在線編輯代碼的jQuery.extend例子codepen了，可以直接運(yùn)行）。

// 1. jQuery.extend( target)
var result1 = $.extend({
    job: "前端開(kāi)發(fā)工程師",
});

console.log(result1, "result1", result1.job); // $函數(shù) 加了一個(gè)屬性 job  // 前端開(kāi)發(fā)工程師

// 2. jQuery.extend( target, object1)
var result2 = $.extend({
    name: "若川",
},
{
    job: "前端開(kāi)發(fā)工程師",
});

console.log(result2, "result2"); // { name: "若川", job: "前端開(kāi)發(fā)工程師" }

// deep 深拷貝
// 3. jQuery.extend( [deep ], target, object1 [, objectN ] )
var result3 = $.extend(true,  {
    name: "若川",
    other: {
        mac: 0,
        ubuntu: 1,
        windows: 1,
    },
}, {
    job: "前端開(kāi)發(fā)工程師",
    other: {
        mac: 1,
        linux: 1,
        windows: 0,
    }
});
console.log(result3, "result3");
// deep true
// {
//     "name": "若川",
//     "other": {
//         "mac": 1,
//         "ubuntu": 1,
//         "windows": 0,
//         "linux": 1
//     },
//     "job": "前端開(kāi)發(fā)工程師"
// }
// deep false
// {
//     "name": "若川",
//     "other": {
//         "mac": 1,
//         "linux": 1,
//         "windows": 0
//     },
//     "job": "前端開(kāi)發(fā)工程師"
// }

結(jié)論：extend函數(shù)既可以實(shí)現(xiàn)給jQuery函數(shù)可以實(shí)現(xiàn)淺拷貝、也可以實(shí)現(xiàn)深拷貝。可以給jQuery上添加靜態(tài)方法和屬性，也可以像jQuery.fn(也就是jQuery.prototype)上添加屬性和方法，這個(gè)功能歸功于this，jQuery.extend調(diào)用時(shí)this指向是jQuery，jQuery.fn.extend調(diào)用時(shí)this指向則是jQuery.fn。

知道這些，其實(shí)實(shí)現(xiàn)淺拷貝還是比較容易的：

// 淺拷貝實(shí)現(xiàn)
jQuery.extend = function(){
    // options 是擴(kuò)展的對(duì)象object1，object2...
    var options,
    // object對(duì)象上的鍵
    name,
    // copy object對(duì)象上的值，也就是是需要拷貝的值
    copy,
    // 擴(kuò)展目標(biāo)對(duì)象，可能不是對(duì)象，所以或空對(duì)象
    target = arguments[0] || {},
    // 定義i為1
    i = 1,
    // 定義實(shí)參個(gè)數(shù)length
    length = arguments.length;
    // 只有一個(gè)參數(shù)時(shí)
    if(i === length){
        target = this;
        i--;
    }
    for(; i < length; i++){
        // 不是underfined 也不是null
        if((options = arguments[i]) !=  null){
            for(name in options){
                copy = options[name];
                // 防止死循環(huán)，continue 跳出當(dāng)前此次循環(huán)
                if ( name === "__proto__" || target === copy ) {
                    continue;
                }
                if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }

    }
    // 最后返回目標(biāo)對(duì)象
    return target;
}

深拷貝則主要是在以下這段代碼做判斷?？赡苁菙?shù)組和對(duì)象引用類型的值，做判斷。

if ( copy !== undefined ) {
    target[ name ] = copy;
}

為了方便讀者調(diào)試，代碼同樣放在jQuery.extend淺拷貝代碼實(shí)現(xiàn)codepen，可在線運(yùn)行。

$.extend = function(){
    // options 是擴(kuò)展的對(duì)象object1，object2...
    var options,
    // object對(duì)象上的鍵
    name,
    // copy object對(duì)象上的值，也就是是需要拷貝的值
    copy,
    // 深拷貝新增的四個(gè)變量 deep、src、copyIsArray、clone
    deep = false,
    // 源目標(biāo)，需要往上面賦值的
    src,
    // 需要拷貝的值的類型是函數(shù)
    copyIsArray,
    //
    clone,
    // 擴(kuò)展目標(biāo)對(duì)象，可能不是對(duì)象，所以或空對(duì)象
    target = arguments[0] || {},
    // 定義i為1
    i = 1,
    // 定義實(shí)參個(gè)數(shù)length
    length = arguments.length;

    // 處理深拷貝情況
    if ( typeof target === "boolean" ) {
        deep = target;

        // Skip the boolean and the target
        // target目標(biāo)對(duì)象開(kāi)始后移
        target = arguments[ i ] || {};
        i++;
    }

    // Handle case when target is a string or something (possible in deep copy)
    // target不等于對(duì)象，且target不是函數(shù)的情況下，強(qiáng)制將其賦值為空對(duì)象。
    if ( typeof target !== "object" && !isFunction( target ) ) {
        target = {};
    }

    // 只有一個(gè)參數(shù)時(shí)
    if(i === length){
        target = this;
        i--;
    }
    for(; i < length; i++){
        // 不是underfined 也不是null
        if((options = arguments[i]) !=  null){
            for(name in options){
                copy = options[name];
                // 防止死循環(huán)，continue 跳出當(dāng)前此次循環(huán)
                if ( name === "__proto__" || target === copy ) {
                    continue;
                }

                // Recurse if we"re merging plain objects or arrays
                // 這里deep為true，并且需要拷貝的值有值，并且是純粹的對(duì)象
                // 或者需拷貝的值是數(shù)組
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = Array.isArray( copy ) ) ) ) {

                    // 源目標(biāo)，需要往上面賦值的
                    src = target[ name ];

                    // Ensure proper type for the source value
                    // 拷貝的值，并且src不是數(shù)組，clone對(duì)象改為空數(shù)組。
                    if ( copyIsArray && !Array.isArray( src ) ) {
                        clone = [];
                        // 拷貝的值不是數(shù)組，對(duì)象不是純粹的對(duì)象。
                    } else if ( !copyIsArray && !jQuery.isPlainObject( src ) ) {
                        // clone 賦值為空對(duì)象
                        clone = {};
                    } else {
                        // 否則 clone = src
                        clone = src;
                    }
                    // 把下一次循環(huán)時(shí)，copyIsArray 需要重新賦值為false
                    copyIsArray = false;

                    // Never move original objects, clone them
                    // 遞歸調(diào)用自己
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don"t bring in undefined values
                }
                else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }

    }
    // 最后返回目標(biāo)對(duì)象
    return target;
};

為了方便讀者調(diào)試，這段代碼同樣放在jQuery.extend深拷貝代碼實(shí)現(xiàn)codepen，可在線運(yùn)行。

判斷參數(shù)是否是函數(shù)。

var isFunction = function isFunction( obj ) {

    // Support: Chrome <=57, Firefox <=52
    // In some browsers, typeof returns "function" for HTML