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

Q：小朋友，你是否瞭解如何拷貝一個物件？

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

Object.assign({},obj);

Q：那如何深拷貝一個物件呢？

R：機智的你

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

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

1. 效能問題，stringify再解析其實需要耗費較多時間，特別是資料量大的時候。
2. 一些型別無法拷貝，例如函式(不輸出)，正則(輸出空物件)，時間物件(輸出時間字串)，Undefiend(不輸出)
3. 遇到迴圈引用的物件會出錯
4. 同層（非同層）同引用的問題，理論下兩個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深拷貝的實現的資料請關注我們其它相關文章！