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