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的源码。