浅拷贝深拷贝之jQuery中的$.extend分析

jQuery中的$.extend浅拷贝,拷贝对象A时,对象B将拷贝A的所有字段,如果字段是内存地址,B将拷贝地址,若果字段是基元类型,B将复制其值。它的缺点是如果你改变了对象B所指向的内存地址,你同时也改变了对象A指向这个地址的字段。

        jQuery中的$.extend深拷贝,这种方式会完全拷贝所有数据,优点是B与A不会相互依赖(A,B完全脱离关联), 缺点是拷贝的速度更慢,代价更大。

一.$.extend浅拷贝

        $.extend浅拷贝实例一,$.extend(a,b)用法,$.extend浅拷贝拷贝对象A时,对象B将拷贝A的所有字段,如果字段是内存地址,B将拷贝地址,若果字段是基元类型,B将复制其值。

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo01</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend(a,b);  
  28.             console.log('a:' + JSON.stringify(a));  
  29.             console.log('b:' + JSON.stringify(b));  
  30.             console.log('c:' + JSON.stringify(c));  
  31.         });  
  32.     </script>  
  33. <body>  
  34. </body>  
  35. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}  
  2. b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}  

        $.extend浅拷贝实例二,$.extend(a,b)用法,如果你改变了对象B所指向的内存地址,你同时也改变了对象A指向这个地址的字段。

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo02</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend(a,b);  
  28.             b.name = 'test';  
  29.             b.company.address = '北京';  
  30.             console.log('a:' + JSON.stringify(a));  
  31.             console.log('b:' + JSON.stringify(b));  
  32.             console.log('c:' + JSON.stringify(c));  
  33.         });  
  34.     </script>  
  35. <body>  
  36. </body>  
  37. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}  
  2. b:{"name":"test","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}  

         $.extend浅拷贝实例三,$.extend({},a,b)用法

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo03</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend({},a,b);  
  28.             console.log('a:' + JSON.stringify(a));  
  29.             console.log('b:' + JSON.stringify(b));  
  30.             console.log('c:' + JSON.stringify(c));  
  31.         });  
  32.     </script>  
  33. <body>  
  34. </body>  
  35. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"zhangshan","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}  
  2. b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}  

        $.extend浅拷贝实例四,$.extend({},a,b)用法

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo04</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend({},a,b);  
  28.             a.name = 'zhangshan01';  
  29.             b.name = 'lisi01';  
  30.             b.company.address = 'shengzhen';  
  31.             console.log('a:' + JSON.stringify(a));  
  32.             console.log('b:' + JSON.stringify(b));  
  33.             console.log('c:' + JSON.stringify(c));  
  34.         });  
  35.     </script>  
  36. <body>  
  37. </body>  
  38. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"zhangshan01","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}  
  2. b:{"name":"lisi01","age":30,"company":{"name":"阿里巴巴","address":"shengzhen"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"shengzhen"},"stature":"172cm"}  

        由$.extend浅拷贝实例三、实例四不难发现,$.extend({},a,b)方法会依次拷贝a、b对象,且b里面的对象是内存地址的拷贝(加上b.company.address = 'shengzhen';语句后执行结果可以看出)。

 

二.$.extend深拷贝

       $.extend深拷贝实例一,$.extend(true,a,b)用法

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo05</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend(true,a,b);  
  28.             console.log('a:' + JSON.stringify(a));  
  29.             console.log('b:' + JSON.stringify(b));  
  30.             console.log('c:' + JSON.stringify(c));  
  31.         });  
  32.     </script>  
  33. <body>  
  34. </body>  
  35. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}  
  2. b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}  

        $.extend深拷贝实例二,$.extend(true,a,b)之后,修改b对象

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo06</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend(true,a,b);  
  28.             b.name = 'test';  
  29.             b.company.address = '北京';  
  30.             console.log('a:' + JSON.stringify(a));  
  31.             console.log('b:' + JSON.stringify(b));  
  32.             console.log('c:' + JSON.stringify(c));  
  33.         });  
  34.     </script>  
  35. <body>  
  36. </body>  
  37. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}  
  2. b:{"name":"test","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}  

        $.extend深拷贝实例三

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo07</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend(true,{},a,b);  
  28.             console.log('a:' + JSON.stringify(a));  
  29.             console.log('b:' + JSON.stringify(b));  
  30.             console.log('c:' + JSON.stringify(c));  
  31.         });  
  32.     </script>  
  33. <body>  
  34. </body>  
  35. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"zhangshan","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}  
  2. b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}  

        $.extend深拷贝实例四,修改b对象

Html代码 

 收藏代码

  1. <html>  
  2. <head>  
  3. </head>  
  4.     <meta charset="GBK">  
  5.     <title>StudyDemo08</title>  
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function() {  
  9.             var a = {  
  10.                 name : 'zhangshan',  
  11.                 age : 28,  
  12.                 company : {  
  13.                     name : '腾讯',  
  14.                     address : '深圳',  
  15.                     size : 10000  
  16.                 }  
  17.             };  
  18.             var b = {  
  19.                 name : 'lisi',  
  20.                 age : 30,  
  21.                 company : {  
  22.                     name : '阿里巴巴',  
  23.                     address : '杭州'  
  24.                 },  
  25.                 stature : '172cm'  
  26.             };  
  27.             var c = $.extend(true,{},a,b);  
  28.             a.name = 'zhangshan01';  
  29.             b.name = 'lisi01';  
  30.             b.company.address = 'shengzhen';  
  31.             console.log('a:' + JSON.stringify(a));  
  32.             console.log('b:' + JSON.stringify(b));  
  33.             console.log('c:' + JSON.stringify(c));  
  34.         });  
  35.     </script>  
  36. <body>  
  37. </body>  
  38. </html>  

        运行结果:

Text代码 

 收藏代码

  1. a:{"name":"zhangshan01","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}  
  2. b:{"name":"lisi01","age":30,"company":{"name":"阿里巴巴","address":"shengzhen"},"stature":"172cm"}  
  3. c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}  

 

三.$.extend源代码

        查看分析$.extend源代码,我们就不难理解上面实例的运行结果了

Js代码 

 收藏代码

  1. jQuery.extend = jQuery.fn.extend = function() {  
  2.     var options, name, src, copy, copyIsArray, clone,  
  3.         target = arguments[0] || {},  
  4.         i = 1,  
  5.         length = arguments.length,  
  6.         deep = false;  
  7.   
  8.     // Handle a deep copy situation  
  9.     if ( typeof target === "boolean" ) {  
  10.         deep = target;  
  11.         target = arguments[1] || {};  
  12.         // skip the boolean and the target  
  13.         i = 2;  
  14.     }  
  15.   
  16.     // Handle case when target is a string or something (possible in deep copy)  
  17.     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  
  18.         target = {};  
  19.     }  
  20.   
  21.     // extend jQuery itself if only one argument is passed  
  22.     if ( length === i ) {  
  23.         target = this;  
  24.         --i;  
  25.     }  
  26.   
  27.     for ( ; i < length; i++ ) {  
  28.         // Only deal with non-null/undefined values  
  29.         if ( (options = arguments[ i ]) != null ) {  
  30.             // Extend the base object  
  31.             for ( name in options ) {  
  32.                 src = target[ name ];  
  33.                 copy = options[ name ];  
  34.   
  35.                 // Prevent never-ending loop  
  36.                 if ( target === copy ) {  
  37.                     continue;  
  38.                 }  
  39.   
  40.                 // Recurse if we're merging plain objects or arrays  
  41.                 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {  
  42.                     if ( copyIsArray ) {  
  43.                         copyIsArray = false;  
  44.                         clone = src && jQuery.isArray(src) ? src : [];  
  45.   
  46.                     } else {  
  47.                         clone = src && jQuery.isPlainObject(src) ? src : {};  
  48.                     }  
  49.   
  50.                     // Never move original objects, clone them  
  51.                     target[ name ] = jQuery.extend( deep, clone, copy );  
  52.   
  53.                 // Don't bring in undefined values  
  54.                 } else if ( copy !== undefined ) {  
  55.                     target[ name ] = copy;  
  56.                 }  
  57.             }  
  58.         }  
  59.     }  
  60.   
  61.     // Return the modified object  
  62.     return target;  
  63. };  

转载于:https://my.oschina.net/u/2246951/blog/784186

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值