jQuery中extend()和fn.extend()方法详解_jquery

html代码如下：

代码如下:

代码如下:
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;
}
}
}
}

这个部分就是此方法的核心了，从arguements对象的第i个下标值开始循环操作首先过滤掉源对象是null或者是undefined的情况可以看到其实

源对象不一定真的就是对像，也可以是其他类型的值比如字符串比如这样写：

代码如下:
console.log($.extend({'name':'tom'},'aa')); //Object {0: "a", 1: "a", name: "tom"}

是不是感觉很奇怪啊？究竟是怎么实现的呢？下面接着看

过滤完之后开始进行for循环 src保存的是目标对象的某个键的值，copy属性保存的源对象的某个键的值，这两个键都是一样的

代码如下:
// Prevent never-ending loop
if ( target === copy ) {
continue;
}

如果源对象的某个属性值就是目标对象可能会造成死循环导致程序崩溃所以这里做了一个限制让其跳过此次循环例如：

代码如下:
var o = {};
o.n1 = o;
$.extend( true, o, { n2: o } );
// 抛出异常：
// Uncaught RangeError: Maximum call stack size exceeded

但是这样做也会冤枉一些正常的情况比如：

代码如下:
var obj1={a:'a'}
var obj2={a:obj1};
console.log($.extend(obj1,obj2)); //Object {a: "a"}

这种情况也是满足源对象值等于目标对象的但是结果发现obj1的a的属性值并没有被修改，就是因为执行了continue，下面把源码的这段话注释掉在执行

代码如下:
Object {a: Object}

这个时候就是正常被修改了个人感觉这个地方需要改进；

接着就是一个if判断就是区分是不是进行深度复制的先不看深度复制的先看一般的

代码如下:
target[ name ] = copy;

很简单就是只要copy有值就直接复制给目标对象，目标对象有的就修改没有就增加，这样就实现了合并啦。

for循环之后在把新的目标对象返回，所以目标对象最后是被修改的，而且结果和返回的结果是一样的。

代码如下:
// Return the modified object
return target;
};

下面再来说说深度复制了怎么去处理

首先保证deep是true,copy有值并且是对象或者数组（如果不是对象和数组深度复制也就无从谈起）然后再分数组和对象来处理，先来看数组的情况：

代码如下:
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];

} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}

如果是数组copyIsArray的值为真然后走里面的 把值改成false ，针对当前循环的源对象属性，目标对象可能有也可能没有，有的话判断一下是不是数组是的话就是原来的数组不变不是的话就让它变成一个数组，因为既然源对象的当前属性是数组最后目标元素也必须是数组。不是数组就是对象把目标对象当前属性改成对象。

代码如下:
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );

然后把源对象的当前属性值（是数组或对象）和已经被改造过的目标对象的当前属性进行递归合并最后返回的新的数组或者对象赋值给目标对象，最终实现了深度复制。

但是这里面还有一个比较奇怪的现象，比如这样操作：

代码如下:
console.log($.extend({a:1},'aa')); //Object {0: "a", 1: "a", a: 1}

原来源对象不一定真的是对象e而且居然可以把字符串拆开跟目标对象合并，原来for...in循环是操作字符串的

代码如下:
var str='aa';
for(var name in str){
console.log(name);
console.log(str[name])
}

这样也是可以的，会把字符串拆开按数字下标读取，但是在源码中

代码如下:
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) )

是有数组和对象限制的，那么深度复制的时候是不是就没有效果了呢？

经过我测试深度复制也是可以的，因为在源码里面copy的值竟然变成了匿名函数函数

alert(jQuery.isPlainObject(copy)); //true

至于为什么是函数笔者还没搞清楚留待以后解决吧！