Javascript笔记：（实践篇）从jQuery插件技术说起分析extend方法的源码（发现extend方法里有bug）（下篇）

1.1     分析$.extend源码

在分析源码之前，我还要加一段s测试代码，代码如下：

<script type="text/javascript">
$(document).ready(function(){
    console.log('==================测试06 start');
    var targetobj = {'id':'NO1111','name':'xiajun','age':23,'sex':'man','comment':{'test01':'t01','test02':'t02','test03':'t03'}},
        srcobj = {'id':'NO1122','name':'sharp','comment':{'test01':'tt001','test02':'tt002','test04':'t04'}};
    var resobj = $.xjcopy(targetobj,srcobj);
    console.log(resobj);//Object { id="NO1122", name="sharp", age=23, sex="man",comment=Object { test01="tt001", test02="tt002", test04="t04"}}
    console.log(targetobj);//Object { id="NO1122", name="sharp", age=23, sex="man",comment=Object { test01="tt001", test02="tt002", test04="t04"}}
    targetobj = {'id':'NO1111','name':'xiajun','age':23,'sex':'man','comment':{'test01':'t01','test02':'t02','test03':'t03'}},
    srcobj = {'id':'NO1122','name':'sharp','comment':{'test01':'tt001','test02':'tt002','test04':'t04'}};
    resobj = $.xjcopy(false,targetobj,srcobj);
    console.log(resobj);//Object { id="NO1122", name="sharp", age=23, sex="man",comment=Object { test01="tt001", test02="tt002", test04="t04"}}
    console.log(targetobj);//Object { id="NO1111", name="xiajun", age=23, sex="man",comment=Object { test01="t01", test02="t02", test03="t03"}}
    targetobj = {'id':'NO1111','name':'xiajun','age':23,'sex':'man','comment':{'test01':'t01','test02':'t02','test03':'t03'}},
    srcobj = {'id':'NO1122','name':'sharp','comment':{'test01':'tt001','test02':'tt002','test04':'t04'}};
    resobj = $.xjcopy(true,targetobj,srcobj);
    console.log(resobj);//Object { id="NO1122", name="sharp", age=23, sex="man",comment=Object { test01="tt001", test02="tt002", test03="t03",test04="t04"}}
    console.log(targetobj);//Object { id="NO1122", name="sharp", age=23, sex="man",comment=Object { test01="tt001", test02="tt002", test03="t03",test04="t04"}}
    console.log('==================测试06 end');
});
</script>

　　我前面写的测试实例里没有大对象里包含小对象的情况，而深浅拷贝关键场景就是对象包含对象的特殊场景，因此这里把这种场景补上。从打印出来的结果我们看到当我们不设置deep属性时候，非comment属性的值是targetobj和srcobj合并的结果，而comment的返回值是srcobj的comment的值，同时extend方法的返回值和target的值是相同；当我们设定了deep属性的值，如果deep值为false时候，我们发现extend的返回值和不设定deep属性时候值是一样的，但是targetobj的值是不会改变的，有个朋友问我，当deep属性设置为false，我们看到targetobj值没变，但是如果srcobj的属性个数超过了targetobj的个数，那么srcobj的多余属性会不会合并到targetobj呢？为了这个问题我再写了一个测试，代码如下：

    targetobj = {'id':'NO1111','name':'xiajun','age':23,'comment':{'test01':'t01','test02':'t02','test03':'t03'}},
    srcobj = {'id':'NO1122','name':'sharp','sex':'man','comment':{'test01':'tt001','test02':'tt002','test04':'t04'}};
    resobj = $.xjcopy(false,targetobj,srcobj);
    console.log(resobj);//Object { id="NO1122", name="sharp", age=23, sex="man",comment=Object { test01="tt001", test02="tt002", test04="t04"}}
    console.log(targetobj);//Object { id="NO1111", name="xiajun", age=23, comment=Object { test01="t01", test02="t02", test03="t03"}}

　　我们发现targetobj的值的确没变；如果我们把deep的值设置为true，那么从结果我们看到targetobj和extend方法的返回值都是被合并后的结果。

　　呵呵，对于extend方法的使用现在比较清晰了吧，我们看测试结果会发现：

　　jQuery里的extend方法存在着bug，如果我们不设定一个参数deep的值最终结果当然不是deep为true所代表的深拷贝，但是它和deep属性设为false时候结果也有不同，目标对象target一个被改变一个没有任何变化，所以不设定deep属性的值也不能说是deep设为false的默认操作，这个应该算是extend方法的bug吧

　　

　　下面我们读读extend方法的源码，看看到底是什么样的原因产生了这样的结果。

　　源码的第一部分是为extend方法内部设定一些需要使用的局部变量，代码如下：

        // options是用来存储拷贝对象的源对象的临时变量，name是拷贝对象的属性值
        // src 用来存储拷贝对象目标的值，copy存储被拷贝对象的目标值比如我们示例代码
        // 里的 src = targetobj['id'],copy = targetobj['id']
        // copyIsArray是个布尔值，用来存储对象是不是数组的标记
        // clone是作为合并的的临时对象（这个大家看深拷贝的代码慢慢体会了）
        // target这个是我们的extend参数的target
        // i是extend参数objectN在arguments里的索引值
        // length是指参数个数，deep深浅拷贝的标记，大家可以看到默认下deep是false
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false;

讲解写在注释里的这里就不在累述了，我们接着读下面的代码：

        // 如果第一个参数是布尔值，那么这是用户在设定是否要进行深浅拷贝
        if ( typeof target === "boolean" ) {
            deep = target;//设定deep的值，这个好理解
            target = arguments[1] || {};//如果设定deep属性，那么target要重新赋值
            // 如果第一个参数设置的深浅拷贝标记，那么i设为2，表明arguments的objectN参数是从索引为2的值开始
            i = 2;
        }

　　注释比较清晰，这里也不啰嗦了。

　　不过这段代码是有问题，是有bug的。这段代码也是我们不设置第一个参数deep值和deep值设为false最后结果不一致所在，其实代码作者的原意是deep不被设置时候的结果和deep设置为false是一样的。但是如果参数为false，typeof判断类型不是boolean而是object

　　大家看下面的测试代码就明白其中道理了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    //alert(typeof false);//boolean
    //alert(typeof true);//boolean
    typeftn(false,{},{});
    typeftn(true,{},{});
}

function typeftn(deep,target,src){
    var bobj = arguments[0] || {};
    //console.log(typeof bobj);//如果是false，结果是object，如果是true结果就是boolean
    alert(typeof bobj);
}
</script>

先搁置一下这个bug，我们接着读extend源码：

    // 如果传入的不是对象或者是函数，可能为字符串，那么把target = {}置为空对象
        // extend最终返回值是target，我们看到target在方法里都是被设置为对象，所以不管我们传什么样的
        // 的参数到extend方法里，最终结果都是object类型，这也说明如果objectN参数是对象，extend同样会做合并操作
        // 如果objectN非object类型那么下面深浅拷贝操作也就没意义了
        if ( typeof target !== "object" && !$.isFunction(target) ) {
            target = {};
        }

下面的代码就是为什么extend可以编写插件的原因了，代码如下：

        // 当参数只有一个时候，target被设置为this，这里就是关键所在，这里的解释我要写在文档里
        if ( length === i ) {
            target = this;
            --i;
        }

　　当我们只传一个参数并且这个参数是object类型，那么target把设置为this，所以当我们按jQuery.extend方式调用extend方法，那么this会指向jQuery对象，代码后面写—i，那么表明当我们只传一个参数时候，这个参数不是target参数而是变成了objectN参数，成为了被拷贝对象，最终参数的内容会被拷贝到jQuery对象内部，最终成为jQuery的全局对象的一个属性。

　　接下来的代码就是做深浅拷贝的代码，这个代码我在前面已经写过，这里也不多讲了，代码如下：

    // 下面的代码就是javascript里做深浅拷贝的代码，这个和我们前面自己写的深浅拷贝的代码类似
        for ( ; i < length; i++ ) {
            // 只操作对象值非null/undefined的数据
            if ( (options = arguments[i]) != null ) {
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];
    
                    // 避免死循环，这个和我写的深拷贝的代码类似
                    if ( target === copy ) {
                        continue;
                    }
    
                    // 通过递归的方式我们把对象和数组类型的数据合并起来
                    if ( deep && copy && ( $.isPlainObject(copy) || (copyIsArray = $.isArray(copy)) ) ) {
                        if ( copyIsArray ) {
                            copyIsArray = false;
                            clone = src && $.isArray(src) ? src : [];
    
                        } else {
                            clone = src && $.isPlainObject(src) ? src : {};
                        }
    
                        // 不去改变原始对象，只是对原始对象做拷贝操作
                        target[ name ] = $.xjcopy( deep, clone, copy );
    
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }
        // 返回结果
        return target;

下面我将我写的和extend方法一模一样的的xjcopy方法改写下，修正extend方法里的bug，代码如下：

;(function($){
    $.xjcopy = $.fn.xjcopy = function(){
        // options是用来存储拷贝对象的源对象的临时变量，name是拷贝对象的属性值
        // src 用来存储拷贝对象目标的值，copy存储被拷贝对象的目标值比如我们示例代码
        // 里的 src = targetobj['id'],copy = targetobj['id']
        // copyIsArray是个布尔值，用来存储对象是不是数组的标记
        // clone是作为合并的的临时对象（这个大家看深拷贝的代码慢慢体会了）
        // target这个是我们的extend参数的target
        // i是extend参数objectN在arguments里的索引值
        // length是指参数个数，deep深浅拷贝的标记，大家可以看到默认下deep是false
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false;
    
        // 如果第一个参数是布尔值，那么这是用户在设定是否要进行深浅拷贝
        if (length >2){
            if (deep === false || deep === true){
                deep = target;//设定deep的值，这个好理解
                target = arguments[1] || {};//如果设定deep属性，那么target要重新赋值
                // 如果第一个参数设置的深浅拷贝标记，那么i设为2，表明arguments的objectN参数是从索引为2的值开始
                i = 2;                
            }
        }
        
        /*if ( typeof target === "boolean") {
            deep = target;//设定deep的值，这个好理解
            target = arguments[1] || {};//如果设定deep属性，那么target要重新赋值
            // 如果第一个参数设置的深浅拷贝标记，那么i设为2，表明arguments的objectN参数是从索引为2的值开始
            i = 2;
        }*/
    
        // 如果传入的不是对象或者是函数，可能为字符串，那么把target = {}置为空对象
        // extend最终返回值是target，我们看到target在方法里都是被设置为对象，所以不管我们传什么样的
        // 的参数到extend方法里，最终结果都是object类型，这也说明如果objectN参数是对象，extend同样会做合并操作
        // 如果objectN非object类型那么下面深浅拷贝操作也就没意义了
        if ( typeof target !== "object" && !$.isFunction(target) ) {
            target = {};
        }
    
        // 如果传入的参数只有一个，跳过下面的步骤
        // 当参数只有一个时候，target被设置为this，这里就是关键所在，这里的解释我要写在文档里
        if ( length === i ) {
            target = this;
            --i;
        }    
        
        // 下面的代码就是javascript里做深浅拷贝的代码，这个和我们前面自己写的深浅拷贝的代码类似
        for ( ; i < length; i++ ) {
            // 只操作对象值非null/undefined的数据
            if ( (options = arguments[i]) != null ) {
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];
    
                    // 避免死循环，这个和我写的深拷贝的代码类似
                    if ( target === copy ) {
                        continue;
                    }
    
                    // 通过递归的方式我们把对象和数组类型的数据合并起来
                    if ( deep && copy && ( $.isPlainObject(copy) || (copyIsArray = $.isArray(copy)) ) ) {
                        if ( copyIsArray ) {
                            copyIsArray = false;
                            clone = src && $.isArray(src) ? src : [];
    
                        } else {
                            clone = src && $.isPlainObject(src) ? src : {};
                        }
    
                        // 不去改变原始对象，只是对原始对象做拷贝操作
                        target[ name ] = $.xjcopy( deep, clone, copy );
    
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }
        // 返回结果
        return target;    
    };
})(jQuery)

　　关于extend的内容我这里讲完了。这里我要说明下，jQuery里extend方法并不代表着jQuery插件技术，只能说extend是实现jQuery插件技术的一种手段。jQuery的插件技术还有很多内容，其中就包括不使用extend实现插件的方式，关于插件的详细内容我会在以后的博客里写道。

　　最后我还想说说，对jQuery插件技术的深入理解可能是理解jQuery源码的一把很重要的钥匙，等我写完了对jQuery插件技术的介绍，我就会继续我临摹jQuery的系列，好好分析下jQuery的源码。