javascript對淺拷貝和深拷貝的詳解
下面小編就為大家?guī)硪黄獪\談JavaScript中面向對象的的深拷貝和淺拷貝。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。
1.淺拷貝:復制一份引用,所有引用對象都指向一份數(shù)據(jù),并且都可以修改這份數(shù)據(jù)。
2.深拷貝(復雜):復制變量值,對于非基本類型的變量,則遞歸至基本類型變量后,再復制。
這里畫一個簡單的圖來加深理解:

一、數(shù)組的深淺拷貝
在使用JavaScript對數(shù)組進行操作的時候,我們經常需要將數(shù)組進行備份,事實證明如果只是簡單的將它賦予其他變量,那么我們只要更改其中的任何一個,然后其他的也會跟著改變,這就導致了問題的發(fā)生。
var arr = ["One","Two","Three"];
var arrto = arr;
arrto[1] = "test";
document.writeln("數(shù)組的原始值:" + arr + "<br />");//Export:數(shù)組的原始值:One,test,Three
document.writeln("數(shù)組的新值:" + arrto + "<br />");//Export:數(shù)組的新值:One,test,Three
像上面的這種直接賦值的方式就是淺拷貝,很多時候,這樣并不是我們想要得到的結果,其實我們想要的是arr的值不變,不是嗎?
方法一:js的slice函數(shù)
var arr = ["One","Two","Three"];
var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("數(shù)組的原始值:" + arr + "<br />");//Export:數(shù)組的原始值:One,Two,Three
document.writeln("數(shù)組的新值:" + arrtoo + "<br />");//Export:數(shù)組的新值:One,set Map,Three
方法二:js的concat方法
var arr = ["One","Two","Three"];
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("數(shù)組的原始值:" + arr + "<br />");//Export:數(shù)組的原始值:One,Two,Three
document.writeln("數(shù)組的新值:" + arrtooo + "<br />");//Export:數(shù)組的新值:One,set Map To,Three
二、對象的深淺拷貝
var a={name:'yy',age:26};
var b=new Object();
b.name=a.name;
b.age=a.age;
a.name='xx';
console.log(b);//Object { name="yy", age=26}
console.log(a);//Object { name="xx", age=26}
就是把對象的屬性遍歷一遍,賦給一個新的對象。
var deepCopy= function(source) {
var result={};
for (var key in source) {
result[key] = typeof source[key]==='object'? deepCoyp(source[key]): source[key];
}
return result;
}
舉一個jQuery中的例子:
jQuery.extend = jQuery.fn.extend = function() {//1.將extend方法擴展到JQ(函數(shù))下邊:擴展靜態(tài)方法
//2. jQuery.fn.extend 把extend擴展到jq.fn下 且jQuery.fn = jQuery.prototype 擴展實例方法
// 1.2.功能相似
var options, name, src, copy, copyIsArray, clone, //定義一些變量
target = arguments[0] || {},
//目標元素是【0】第一個元素$.extend( a , { name : 'hello' } , { age : 30 } );
i = 1, //第一個元素的位置
length = arguments.length,//第一個個對象的元素
deep = false; //是否是深拷貝 默認 false不是
// Handle a deep copy situation 看是不是深拷貝情況
if ( typeof target === "boolean" ) { //是布爾值
deep = target;
target = arguments[1] || {}; //目標元素是第二個$.extend( true , a , b )
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy) 看參數(shù)正確不
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
// 當目標不是對象或者不是函數(shù)的時候
target = {}; //變成一個空的jason
}
// extend jQuery itself if only one argument is passed看是不是插件情況
if ( length === i ) { //只寫了一個對象 要把這個對象擴展到jq源碼上 靜態(tài)方法 或者是實例方法
target = this; //this 是$ 或者 $();
--i;
}
// 可能有多個對象情況
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 ) {//防止循環(huán)引用
continue;//跳出本次循環(huán)繼續(xù)執(zhí)行
// $.extend( a , { name : a } ) );循環(huán)引用 a也是一個對象
}
// Recurse if we're merging plain objects or arrays深拷貝
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// 是深拷貝 且需有var b = { name : { age : 30 } }; 且b必須是對象自變量(jason) 或者是個數(shù)組
//遞歸
if ( copyIsArray ) { //數(shù)組
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : []; //定義一個空數(shù)組
} else {//jason
clone = src && jQuery.isPlainObject(src) ? src : {};//看原有的屬性有沒有且是不是jason定義一個空jason
}
// var a = { name : { job : 'it' } }; 看有沒有原有的屬性 有的話在原有的上邊添加
// var b = { name : {age : 30} };
// $.extend( true , a , b );//a繼承b
// console.log( a ); a{ name:{ job : 'it' ,age : 30}} 如果只有一個{} 則只有,age : 30
// Never move original objects, clone(a) them
target[ name ] = jQuery.extend( deep, clone, copy );
//調用函數(shù)本身進行進一步的遞歸處理
// Don't bring in undefined values淺拷貝
} else if ( copy !== undefined ) {
target[ name ] = copy; //直接復制因為里邊沒有對象
}
}
}
}
// Return the modified object
return target;
};
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Javascript 淺拷貝、深拷貝的實現(xiàn)代碼
- JavaScript數(shù)組深拷貝和淺拷貝的兩種方法
- 淺談JavaScript中面向對象的的深拷貝和淺拷貝
- js對象淺拷貝和深拷貝詳解
- javascript深拷貝和淺拷貝詳解
- 淺析javaScript中的淺拷貝和深拷貝
- JavaScript基礎心法 深淺拷貝(淺拷貝和深拷貝)
- javascript深拷貝、淺拷貝和循環(huán)引用深入理解
- JavaScript深拷貝和淺拷貝概念與用法實例分析
- JavaScript實現(xiàn)淺拷貝與深拷貝的方法分析
- JS淺拷貝和深拷貝原理與實現(xiàn)方法分析
- JS中實現(xiàn)淺拷貝和深拷貝的代碼詳解
- javascript二維數(shù)組和對象的深拷貝與淺拷貝實例分析
- javascript 關于賦值、淺拷貝、深拷貝的個人理解
- JS賦值、淺拷貝和深拷貝(數(shù)組和對象的深淺拷貝)實例詳解
- 詳解JS深拷貝與淺拷貝
- JS對象復制(深拷貝和淺拷貝)
- js深拷貝與淺拷貝一文徹底搞懂
相關文章
Typescript中interface與type的相同點與不同點的詳細說明
這篇文章主要介紹了Typescript中interface與type的相同點與不同點,并配有實例說明,需要的朋友可以參考下2022-11-11
jquery下組織javascript代碼(js函數(shù)化)
這里整理的是jquery下js的一些代碼組織方法,大家可以借鑒下整理出基于jquery的自己喜歡的模式。2010-08-08
Javascript學習筆記之數(shù)組的構造函數(shù)
這篇文章主要介紹了Javascript數(shù)組的構造函數(shù)及常見的操作,講解的十分詳細,這里推薦給大家2014-11-11
javascript學習筆記(九)javascript中的原型(prototype)及原型鏈的繼承方式
在javascript學習筆記(八)中,我們主要學習了在使用javascript面向對象編程時,如何創(chuàng)建對象及添加對象的屬性和方法。2011-04-04

