您好,登錄后才能下訂單哦!
今天小編給大家分享一下Javascript深拷貝是什么的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
為啥要用深拷貝?
在很多情況下,我們都需要給變量賦值,給內(nèi)存地址賦予一個(gè)值,但是在賦值引用值類型的時(shí)候,只是共享一個(gè)內(nèi)存區(qū)域,導(dǎo)致賦值的時(shí)候,還跟之前的值保持一直性。
看一個(gè)具體的例子
// 給test賦值了一個(gè)對(duì)象 var test = { a: 'a', b: 'b' }; // 將test賦值給test2 // 此時(shí)test和test2是共享了同一塊內(nèi)存對(duì)象,這也就是淺拷貝 var test2 = test; test2.a = 'a2'; test.a === 'a2'// 為true
圖解:
這下就很好理解為什么引用值類型數(shù)據(jù)相互影響問(wèn)題。
實(shí)現(xiàn)
實(shí)現(xiàn)一個(gè)深拷貝函數(shù),就不得不說(shuō)javascript的數(shù)值類型。
判斷javascript類型
javascript中有以下基本類型
類型 | 描述 |
---|---|
undefined | undefined類型只有一個(gè)值undefined,它是變量未被賦值時(shí)的值 |
null | null類型也只有一個(gè)值null, 它是一個(gè)空的對(duì)象引用 |
Boolean | Boolean有兩種取值true和false |
String | 它表示文本信息 |
Number | 它表示數(shù)字信息 |
Object | 它是一系列屬性的無(wú)序集合, 包括函數(shù)Function和數(shù)組Array |
使用typeof是無(wú)法判斷function和array的,這里使用Object.prototype.toString方法。 默認(rèn)情況下,每個(gè)對(duì)象都會(huì)從Object上繼承到toString()方法,如果這個(gè)方法沒(méi)有被這個(gè)對(duì)象自身或者更接近的上層原型上的同名方法覆蓋(遮蔽),則調(diào)用該對(duì)象的toString()方法時(shí)會(huì)返回”[object type]”,這里的字符串type表示了一個(gè)對(duì)象類型
function type(obj) { var toString = Object.prototype.toString; var map = { '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regExp', '[object Undefined]': 'undefined', '[object Null]' : 'null', '[object Object]' : 'object' }; return map[toString.call(obj)]; }
實(shí)現(xiàn)deepClone
對(duì)于非引用值類型的數(shù)值,直接賦值,而對(duì)于引用值類型(object)還需要再次遍歷,遞歸賦值。
function deepClone(data) { var t = type(data), o, i, ni; if(t === 'array') { o = []; }else if( t === 'object') { o = {}; }else { return data; } if(t === 'array') { for (i = 0, ni = data.length; i < ni; i++) { o.push(deepClone(data[i])); } return o; }else if( t === 'object') { for( i in data) { o[i] = deepClone(data[i]); } return o; } }
這里有個(gè)點(diǎn)大家要注意下,對(duì)于function類型,博主這里是直接賦值的,還是共享一個(gè)內(nèi)存值。這是因?yàn)楹瘮?shù)更多的是完成某些功能,有個(gè)輸入值和返回值,而且對(duì)于上層業(yè)務(wù)而言更多的是完成業(yè)務(wù)功能,并不需要真正將函數(shù)深拷貝。
但是function類型要怎么拷貝呢?
其實(shí)博主只想到了用new來(lái)操作一下,但是function就會(huì)執(zhí)行一遍,不敢想象會(huì)有什么執(zhí)行結(jié)果哦!o(╯□╰)o!其它暫時(shí)還沒(méi)有什么好的想法,歡迎大家指導(dǎo)哦!
到這里差不多也就實(shí)現(xiàn)完了深拷貝,又有人覺(jué)的怎么沒(méi)有實(shí)現(xiàn)淺拷貝呢?
淺拷貝?
對(duì)于淺拷貝而言,可以理解為只操作一個(gè)共同的內(nèi)存區(qū)域!這里會(huì)存在危險(xiǎn)!(。﹏。*) 。
如果直接操作這個(gè)共享的數(shù)據(jù),不做控制的話,會(huì)經(jīng)常出現(xiàn)數(shù)據(jù)異常,被其它部分更改。所以應(yīng)該不要直接操作數(shù)據(jù)源,給數(shù)據(jù)源封裝一些方法,來(lái)對(duì)數(shù)據(jù)來(lái)進(jìn)行CURD操作。
到這里估計(jì)就差不多了,但是作為一個(gè)前端,不僅僅考慮javascript本身,還得考慮到dom、瀏覽器等。
Element類型
來(lái)看下面代碼,結(jié)果會(huì)返回啥呢?
Object.prototype.toString.call(document.getElementsByTagName('div')[0])
答案是[object HTMLDivElement]
有時(shí)候保存了dom元素, 一不小心進(jìn)行深拷貝,上面的深拷貝函數(shù)就缺少了對(duì)Element元素的判斷。而判斷Element元素要使用instanceof來(lái)判斷。因?yàn)閷?duì)于不同的標(biāo)簽,tostring會(huì)返回對(duì)應(yīng)不同的標(biāo)簽的構(gòu)造函數(shù)。
function type(obj) { var toString = Object.prototype.toString; var map = { '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regExp', '[object Undefined]': 'undefined', '[object Null]' : 'null', '[object Object]' : 'object' }; if(obj instanceof Element) { return 'element'; } return map[toString.call(obj)]; }
其它方式?
JSON實(shí)現(xiàn)
先通過(guò)JSON.stringify一下,然后再JSON.parse一下,就能實(shí)現(xiàn)深拷貝。但是數(shù)據(jù)類型只支持基本數(shù)值類型。
var obj = { a: 'a', b: function(){console.log('b')} } //在JSON.stringify的時(shí)候就會(huì)把function給過(guò)濾了。 JSON.stringify(obj)// "{"a":"a"}"
以上就是“Javascript深拷貝是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。