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

时间  2019-11-13
标签 拷贝 jquery extend 分析 栏目 JQuery 繁體版
原文   原文链接

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

        jQuery中的$.extend深拷贝，这种方式会彻底拷贝全部数据，优势是B与A不会相互依赖（A,B彻底脱离关联）， 缺点是拷贝的速度更慢，代价更大。html

一.$.extend浅拷贝java

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

Html代码 app

 收藏代码

  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>  

        运行结果：oop

Text代码 this

 收藏代码

  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指向这个地址的字段。spa

Html代码 htm

 收藏代码

  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浅拷贝实例3、实例四不难发现，$.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. };  
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程