首页手记 $.extend第二篇【源码逐行分析】

$.extend第二篇【源码逐行分析】

标签：

Html/CSS JQuery JavaScript

我们来填上次$.extend基础用法挖的坑，来逐行分析一下jQuery中$extend方法是怎样实现的。

首先先贴源码：


jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
    target = arguments[0]  {}, 
    i = 1,
    length = arguments.length,
    deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1]  {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ ) {
    // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];
                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy)  (copyIsArray =    jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];
                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }
                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

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

    // Return the modified object
     return target;
};

第一行：
jQuery.extend = jQuery.fn.extend = function() { //给jQuery对象和jQuery原型对象都添加了extend扩展方法。

一：初始化变量过程：
var //每一个变量具体代表什么，我们往下分析就会得到结果。
options,
name,
src,
copy,
copyIsArray,
clone,
target = arguments[0] {}, // Return the modified object 返回的最后修改的对象
//这里初始化为第一个参数，如果没有就是空对象（但这都是在多于一个参数且第一个参数不是boolean类型的情况，后面马上会说明）
i = 1, //这里是表示传入参数访问的下标
length = arguments.length, //参数的长度
deep = false; //是否深度复制

---------------------------------------------华丽的分割线---------------------------------------

二：初步判断参数过程：
这里是分三个简单的小判断：
（1）判断target是否是boolean，也就是判断第一个参数传入的是否布尔类型。


// Handle a deep copy situation  操作深度复制的情况
if ( typeof target === "boolean" ) {   //如果这里的target类型是boolean
    deep = target;  //这里就让深度复制的flag等于target
    target = arguments[1]  {};   //这里让target接收第二个传入的参数。
    // skip the boolean and the target
    i = 2;   //跳过布尔值和目标   （通过调整下标）
}

测试结果：


console.log( $.extend(true,{name:1}) ); //jQuery对象
/*
function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}
*/
console.log( $.extend(true,{name:1},{name:2,age:18}) ); //Object {name: 2, age: 18}

问：这里为什么在传两个参数的时候，target返回的是jQuery对象呢？
答：因为这里满足了下面要说的第三个小判断，别着急，继续看下去。

（2）控制当target不是object或者function的情况。


// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};  //不是object或function类型的时候，让target为空{}。
}

（3）当参数列表长度等于i的时候，扩展jQuery对象自身。


// extend jQuery itself if only one argument is passed
 if ( length === i ) {
    target = this;
    --i;  //这里--i是控制下标溢出的，因为i初始化是1，如果穿一个参数下标就会超出长度，如果第一个参数是boolean类型，这样传两个参数，同样也会溢出，具体原因可以去看第（1）个小判断。
}

测试结果：


$.extend({
    b:1,
    a:function(){
        alert(1);
    }
});
console.log($.b); //1    (注释掉--i)  undefined
$.a(); //alert(1);   (注释掉--i) Uncaught TypeError: $.a is not a function

-------------------------------------晕晕的分割线-----------------------------------------------

三：遍历参数列表给target赋值的阶段。
for ( ; i < length; i++ ) {
//这里是循环的执行体
}
在研究内部逻辑之前，首先我们先看一下for循环下i的问题：
这个i在这次的分析中，是一个还没有解决的问题，看下图：

这里会多了一次循环，目前在源码里我没有找到是什么原因出现的，而且后面多遍历出了jQuery中的offsetSupport和support对象，感兴趣的同学可以深入研究一下，也欢迎大神们留评论指导(^__^)。

内部逻辑：
（1）浅层复制：

下边这段代码是深层复制的条件判定，我们先跳过，过一会再讨论，我们现在需要关注的是else if中的内容：


if ( deep && copy && ( jQuery.isPlainObject(copy)  (copyIsArray = jQuery.isArray(copy)) ) ) { 
// deep必须指定为真，copy在循环中不为undefined的情况，copy必须是new出的Object或者{}格式，或者copy是一个数组，用变量copyIsArray 来接收copy是不是数组 存储的是boolean

来看else if部分的代码（很简单的一句）：


else if ( copy !== undefined ) {
    target[ name ] = copy; 
    //这里用到了name和copy两个我们还没有赋值的变量，而看这个形式obj[name] = value 你想到了什么？ 
}

接下来我们来向上找，name和copy所对应的key和value在哪里：


if ( (options = arguments[ i ]) != null ) {
 //循环中arguments[i]赋值给options变量 而且要求这个值不能为null
    // Extend the base object
    for ( name in options ) {  //这里for in循环遍历每一个options
        src = target[ name ]; //src存改变之前target对象上每一个key对应的value
        copy = options[ name ]; //copy存传入对象上每一个key对应的value

这里不是很好理解，单独写一个例子便于理解：
比如我们这样调用：$.extend({},{name:1},{name:2,age:18});
参数列表中的每一项，分别是{} 、{name:1} 、{name:2,age:18}
这个时候由于i初始化是1 所以options是访问不到{}，而同时的状态下target指向的是{}。
下标0的元素不会访问到的demo：


function rep(){
    var name,
    options,
    copy,
    len = arguments.length,
    i = 1;
    for(; i<len; i++){
        if(  (options = arguments[i]) != null ){
            alert(1);
        }
    }
}

rep({}); //这个时候不会alert 
rep({},{}); //这时才会

一个简单抽离出来的浅层复制代码实现：


function rep(){
    var name,
        options,
        copy,
        len = arguments.length,
        i = 1,
        target = arguments[0],
        src,
        copy;
    for(; i<len; i++){
        if(  (options = arguments[i]) != null ){
            for(name in options){
                src = target[name];
                copy = options[name];

                console.log(src); //undefined  undefined  18 undefined
                console.log(copy);//1   18  '16'  Object {eat: "eat", run: "run"}
                //这个结果就很明显的说明了 name、src、copy都指的是什么了。

                //最后扩展的过程就是把copy上获取到的不为undefined的值，复制到            target的同一个key上。(同key会覆盖)
                if(copy !== undefined){
                    target[name] = copy;
                }
            }
        }
    }
    return target;
}

var res = rep({},{name:1,age:18},{age:'16',params:{eat:'eat',run:'run'}});
console.log(res); //Object {name: 1, age: "16", params: Object} 也就意味着把第二个之后的参数对象内容都扩展到第一个空{}上了。

（2）深层复制：
第一句判断，前边注释过，就不多说了，直接看内部的逻辑：


// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy)  (copyIsArray = jQuery.isArray(copy)) ) ) {
    if ( copyIsArray ) { //这里是copy是数组的情况
        copyIsArray = false; //先从新指定为false，要不然下次循环判定就会出问题
        clone = src && jQuery.isArray(src) ? src : []; 
        //如果src存在且是数组的话就让clone副本等于src否则等于空数组。
    } else { //copy是对象的情况
        clone = src && jQuery.isPlainObject(src) ? src : {};
        //同数组的操作
    }

    // Never move original objects, clone them
    target[ name ] = jQuery.extend( deep, clone, copy );
    //这里用递归的形式在走一次entend方法，来判断经过一次复制之后，是否还存在数组或对象形式的copy，如果有则再次走这个if分支，没有则走上面浅层复制的分支。
}

测试代码：


//这里在fon in 循环中加了两条console用来帮助我们查看结果。
console.log('src：'+JSON.stringify(src));
console.log('copy：'+JSON.stringify(copy));

//这里是调用的测试代码部分：
var res = $.extend(
    true,
    {
        params:{
            add:'no'
        }
    },
    {
        name:1,
        params:{
            add:'add',
            remove:'remove'
        }
    }
);
console.log(res);

测试结果截图：