在面試中你是否遇到過(guò)如下場(chǎng)景：

Q：小朋友，你是否了解如何拷貝一個(gè)對(duì)象？

R：此時(shí)，機(jī)智的你可能會(huì)想到

Object.assign({}, obj);

Q：那如何深拷貝一個(gè)對(duì)象呢？

R：機(jī)智的你

JSON.parse(JSON.stringify(obj));

Q：使用stringify這種方式有何弊端？

性能問(wèn)題，stringify再解析其實(shí)需要耗費(fèi)較多時(shí)間，特別是數(shù)據(jù)量大的時(shí)候。 一些類型無(wú)法拷貝，例如函數(shù)(不輸出)，正則(輸出空對(duì)象)，時(shí)間對(duì)象(輸出時(shí)間字符串)，Undefiend(不輸出) 遇到循環(huán)引用的對(duì)象會(huì)出錯(cuò) 同層（非同層）同引用的問(wèn)題，理論下兩個(gè)key對(duì)應(yīng)的val如果指向同一個(gè)對(duì)象，拷貝也應(yīng)該指向一個(gè)相同新地址才對(duì)

Q：那你能自己實(shí)現(xiàn)個(gè)深拷貝函數(shù)？

R：如下：

const deepClone = (obj) => { // 非引用類型及函數(shù)將直接返回 if (!obj || typeof obj !== ’object’) return obj; // 特殊的引用類型處理 switch(Object.prototype.toString.call(obj).slice(8, -1)) { case ’Date’: return new Date(obj); break; case ’RegExp’: return new RegExp(obj); break; case ’String’: return new String(obj); break; case ’Number’: return new Number(obj); break; case ’Boolean’: return new Boolean(obj); break; } const result = obj instanceof Array ? [] : {}; for (let propName in obj) { if (obj.hasOwnProperty(propName)) { result[propName] = deepClone(obj[propName]); } } return result;}

優(yōu)點(diǎn)：實(shí)現(xiàn)了大多數(shù)數(shù)據(jù)類型的拷貝，所有非引用類型及引用類型的String Number Boolean Function Array Date RegExp

缺點(diǎn)：未考慮一些特殊的引用類型如Error Math Symbol Map Set JSON，函數(shù)屬于引用拷貝，未解決循環(huán)引用的問(wèn)題

Q：如何解決循環(huán)引用？

R：將父層級(jí)的數(shù)據(jù)緩存對(duì)比（可以順帶解決同層（非同層）同引用的問(wèn)題）

const deepClone = (obj) => { // 非引用類型及函數(shù)將直接返回 if (!obj || typeof obj !== ’object’) return obj; // 特殊的引用類型處理 switch (Object.prototype.toString.call(obj).slice(8, -1)) { case ’Date’: return new Date(obj); break; case ’RegExp’: return new RegExp(obj); break; case ’String’: return new String(obj); break; case ’Number’: return new Number(obj); break; case ’Boolean’: return new Boolean(obj); break; } const map = deepClone.map = deepClone.map || new Map(); // 使用map結(jié)構(gòu)可以不必循環(huán)緩存，提高效率 if (map.get(obj)) { return map.get(obj); } const result = obj instanceof Array ? [] : {}; // 如果仔細(xì)觀察可以發(fā)現(xiàn)解決了同層同引用的問(wèn)題 map.set(obj, result); for (let propName in obj) { if (obj.hasOwnProperty(propName)) { result[propName] = deepClone(obj[propName]); } } return result;}

Q：為什么函數(shù)還是指向原來(lái)的函數(shù)，而不創(chuàng)建新函數(shù)？

R：理論下函數(shù)也可以通過(guò)new Function(code)來(lái)創(chuàng)建新的函數(shù)，但是如果遇到閉包函數(shù)，我們無(wú)法得到原函數(shù)的外層定義的變量及其原有作用域鏈，這些在JS詞法解析時(shí)完成的步驟我們無(wú)法得知，所有只能引用原函數(shù)比較好。

Sum: 上面實(shí)現(xiàn)的缺點(diǎn)主要是沒(méi)有完全覆蓋特殊引用類型，但其實(shí)我們平時(shí)應(yīng)該不會(huì)遇到那些類型，所以可以湊合使用。如果還有其它的問(wèn)題沒(méi)有考慮到或者有出錯(cuò)的，希望大家可以幫忙指出。

以上就是JS面試題中深拷貝的實(shí)現(xiàn)講解的詳細(xì)內(nèi)容，更多關(guān)于JS深拷貝的實(shí)現(xiàn)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！