淺拷貝深拷貝之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教程