jQuery.extend 函数使用详解

JQuery的extend扩展方法：
      Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。
      一、Jquery的扩展方法原型是:　　　

extend(dest,src1,src2,src3...);

      它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

      这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

 

      那么合并后的结果

result={name:"Jerry",age:21,sex:"Boy"}

      也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

      二、省略dest参数
      上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
 　　1、$.extend(src)
 　　该方法就是将src合并到jquery的全局对象中去，如：

$.extend({
hello:function(){alert('hello');}
});
 　　就是将hello方法合并到jquery的全局对象中。

 　　2、$.fn.extend(src)
 　　该方法将src合并到jquery的实例对象中去，如:

$.fn.extend({
hello:function(){alert('hello');}
});

 

　　 就是将hello方法合并到jquery的实例对象中。

 　　下面例举几个常用的扩展实例：

$.extend({net:{}});

 

　　 这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert('hello');}
})

  　　这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

 　　三、Jquery的extend方法还有一个重载原型：  深度拷贝

extend(boolean,dest,src1,src2,src3...)

      第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );

      我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是： 

result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}

 

       也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：

var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);

     那么合并后的结果就是:

result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

[javascript] view plain copy

1. jQuery.extend = jQuery.fn.extend = function() {  
2.     // i 此处初始值为 1 ，主要是为了便于区分深度复制时，确保target对象的正确性  
3.     var src, copyIsArray, copy, name, options, clone,  
4.         target = arguments[0] || {},  
5.         i = 1,  
6.         length = arguments.length,  
7.         deep = false;  
8.   
9.     // Handle a deep copy situation 
   
10.   // 第一个参数如果是Boolean类型则进行赋值深度的选择    ，target规定哪个DOM元素触发该事件，这边如果是Boolean时触发深度赋值
    
11.     if ( typeof target === "boolean" ) { 
    
12.         deep = target;  
13.   
14.         // skip the boolean and the target  
15.         // 如果没有传入target对象并且第一个参数是boolean类型是，新创建一个对象，用于赋值  
16.         target = arguments[ i ] || {};     
17.         i++;  
18.     }  
19.   
20.     // Handle case when target is a string or something (possible in deep copy)  
21.     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  
22.         target = {};  
23.     }  
24.   
25.     // extend jQuery itself if only one argument is passed  
26.     if ( i === length ) {  // 英文注释已经表明了，如果只有一个参数，target对象为jQuery自身  
27.         target = this;  
28.         i--;  
29.     }  
30.   
31.     // 对从i开始的多个参数进行遍历  
32.     for ( ; i < length; i++ ) {  
33.         // Only deal with non-null/undefined values  
34.         // 只处理有定义的值  
35.         if ( (options = arguments[ i ]) != null ) {  
36.             // Extend the base object  
37.             // 展开扩展对象  
38.             for ( name in options ) {  
39.                 src = target[ name ];  
40.                 copy = options[ name ];  
41.   
42.                 // Prevent never-ending loop  
43.                 // 防止循环引用  
44.                 if ( target === copy ) {  
45.                     continue;  
46.                 }  
47.   
48.                 // Recurse if we're merging plain objects or arrays  
49.                 // 递归处理深拷贝  
50.                 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {  
51.                     if ( copyIsArray ) {  
52.                         copyIsArray = false;  
53.                         clone = src && jQuery.isArray(src) ? src : [];  
54.   
55.                     } else {  
56.                         clone = src && jQuery.isPlainObject(src) ? src : {};  
57.                     }  
58.   
59.                     // Never move original objects, clone them  
60.                     target[ name ] = jQuery.extend( deep, clone, copy );  
61.   
62.                 // Don't bring in undefined values  
63.                 // 不处理未定义值  
64.                 } else if ( copy !== undefined ) {  
65.                     //给target增加属性或方法  
66.                     target[ name ] = copy;  
67.                 }  
68.             }  
69.         }  
70.     }  
71.   
72.     // Return the modified object  
73.     return target;  
74. };  

代码的大部分都是用来实现jQuery.extend()中有多个参数时的对象合并，深度拷贝问题，如果去掉这些功能，让extend只有扩展静态和实例方法的功能，那么代码如下:

[javascript] view plain copy

1. jQuery.extend = jQuery.fn.extend = function(object){  
2.   
3.     //object是传递过来扩展到this上的对象  
4.   
5.     var target = this;  
6.   
7.     for (var name in object){  
8.   
9.         //name为对象属性  
10.   
11.         //copy为属性值  
12.   
13.         copy = obj[name];  
14.   
15.         //防止循环调用  
16.   
17.         if(target === copy) continue;  
18.   
19.        //防止附加未定义值  
20.   
21.        if(typeof copy === 'undefined') continue;  
22.   
23.        //赋值  
24.  
    
25.        target[name]=copy;   
    
26.     }  
27.   
28.     return target;  
29. }  

 4.关于复制深浅的学习与讨论：

先利用jQuery中的extend()来窥探一下深浅复制的区别，先来一个整体感知：

[html] view plain copy

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <script src="jquery-1.11.1.js"></script>  
5.     <script>  
6.         var  
7.             obj1 = { a : 'a', b : 'b' },  
8.   
9.             obj2 = {},  
10.   
11.             obj3 = {  x : { xxx : 'oldValue', yyy : 'yyy' },  y : 'y' };   
12.           
13.         $.extend(true, obj1, obj3);   // 第一个参数为true表示执行深度复制  
14.   
15.         $.extend(obj2, obj3);   // deep的默认值为false，表示前复制  
16.   
17.         console.log(obj1.x.xxx);  // 输出"oldValue"      
18.   
19.         obj3.x.xxx = 'newVlaue';   
20.   
21.         console.log(obj3.x.xxx);  // 输出"newValue"    
22.   
23.         console.log(obj1.x.xxx);  // 输出"oldValue" 因为是深度复制，所以obj1中的属性值的改变不会再obj2中得到体现  
24.   
25.         console.log(obj2.x.xxx);  // 输出"newValue" 因为是浅赋值，仅仅是简单的给对象多添加了一个引用而已  
26.     </script>  
27. </head>  
28. <body>  
29. </body>  
30. </html>  

在感知有了一个整体的感知后，我们开始来探讨关于深浅复制的基本实现问题：

(1)：浅复制的实现：（基于源码进行精简，更过具体实现可以去参考一下《JavaScript高级程序设计》，我记得里面有很多讨论的地方！）

[javascript] view plain copy

1. $ = {   
2.     extend : function(target, options) {   
3.         for (name in options) {   
4.             target[name] = options[name];   
5.          }   
6.         return target;   
7.     }   
8.  };  

(2)：深赋值的实现：(还是基于jQuery源码进行精简的，并没有考虑DOM、Window对象这些的过滤，也没有考虑IE的兼容，听见IE不再更新的时候，心情那叫一个酸爽~~~)

[javascript] view plain copy

1. $ = {   
2.     extend : function(deep, target, options) {   
3.         for (name in options) {   
4.             copy = options[name];   
5.        // 赋值过程中对属性的具体类型进行区别处理，这里只是简单的处理了一下  
6.             if (deep && copy instanceof Array) {   
7.                  target[name] = $.extend(deep, [], copy);   
8.             } else if (deep && copy instanceof Object) {   
9.                 target[name] = $.extend(deep, {}, copy);   
10.             } else {   
11.                 target[name] = options[name];   
12.             }   
13.        }   
14.         return target;   
15.     }   
16. };