在面試中你是否遇到過如下場景：

Q：小朋友，你是否了解如何拷貝一個對象？

R：此時，機智的你可能會想到

Object.assign({}, obj);

Q：那如何深拷貝一個對象呢？

R：機智的你

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

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

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

Q：那你能自己實現個深拷貝函數？

R：如下：

const deepClone = (obj) => { // 非引用類型及函數將直接返回 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;}

優點：實現了大多數數據類型的拷貝，所有非引用類型及引用類型的String Number Boolean Function Array Date RegExp

缺點：未考慮一些特殊的引用類型如Error Math Symbol Map Set JSON，函數屬于引用拷貝，未解決循環引用的問題

Q：如何解決循環引用？

R：將父層級的數據緩存對比（可以順帶解決同層（非同層）同引用的問題）

const deepClone = (obj) => { // 非引用類型及函數將直接返回 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結構可以不必循環緩存，提高效率 if (map.get(obj)) { return map.get(obj); } const result = obj instanceof Array ? [] : {}; // 如果仔細觀察可以發現解決了同層同引用的問題 map.set(obj, result); for (let propName in obj) { if (obj.hasOwnProperty(propName)) { result[propName] = deepClone(obj[propName]); } } return result;}

Q：為什么函數還是指向原來的函數，而不創建新函數？

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

Sum: 上面實現的缺點主要是沒有完全覆蓋特殊引用類型，但其實我們平時應該不會遇到那些類型，所以可以湊合使用。如果還有其它的問題沒有考慮到或者有出錯的，希望大家可以幫忙指出。

以上就是JS面試題中深拷貝的實現講解的詳細內容，更多關于JS深拷貝的實現的資料請關注好吧啦網其它相關文章！