理清JS中的深拷貝與淺拷貝

時間 2019-11-07

標籤理清拷貝欄目 JavaScript 简体版

原文原文鏈接

做者：Manjula Dubejavascript

譯者：前端小智html

來源：Medium前端

爲了保證的可讀性，本文采用意譯而非直譯。java

阿里雲最近在作活動，低至2折，有興趣能夠看看：promotion.aliyun.com/ntms/yunpar…git

淺拷貝

淺拷貝是對象的逐位複製。建立一個新對象，該對象具備原始對象中值的精確副本。若是對象的任何字段是對其餘對象的引用，則只複製引用地址，即，複製內存地址。github

大白話講就是，淺拷貝是對對象地址的複製，並無開闢新的棧，也就是複製的結果是兩個對象指向同一個地址，修改其中一個對象的屬性，則另外一個對象的屬性也會改變。面試

深拷貝

深拷貝複製全部字段，並複製字段所指向的動態分配內存。深拷貝發生在對象及其引用的對象被複制時。後端

大白話講就是，深拷貝則是開闢新的棧，兩個對象對應兩個不一樣的地址，修改一個對象的屬性，不會改變另外一個對象的屬性。安全

Look See See 例子

淺拷貝:它將X的引用複製到Y中。所以，X和Y的地址是相同的，也就是說它們指向相同的內存位置。工具

深拷貝:複製X的全部成員，爲Y分配不一樣的內存位置，而後將複製的成員分配給Y，實現深拷貝。這樣，若是X消失了，Y在內存中仍然有效。

考慮下面的代碼：

var employeeDetailsOriginal = {  
  name: '前端小智', 
  age: 18,
  Profession: '前端開發' 
};
複製代碼

假設你想建立一個這個對象的副本，這樣即便原始值被改變了，仍然能夠經過副本獲得原始對象的值。

我會這樣作：

var employeeDetailsDuplicate = employeeDetailsOriginal; // 淺拷貝
複製代碼

若是我們改變一個值：

employeeDetailsDuplicate.name = '王大治';
複製代碼

這樣操做，我們的原始對象 employeeDetailsOriginal 的屬性 name 也會跟着改變，由於這裏是一個淺拷貝。這樣我們就獲取不到原始對象的值了。因此這種拷貝作法是不對的。

可是，經過使用原始employeeDetailsOriginal變量的屬性建立一個全新的變量，就能夠建立一個深拷貝副本。

var employeeDetailsDuplicate = {
  name: employeeDetailsOriginal.name,
  age: employeeDetailsOriginal.age, 
  Profession: employeeDetailsOriginal.Profession
}; // 深拷貝
複製代碼

如今，若是更改employeeDetailsDuplicate.name，它只會影響employeeDetailsDuplicate，而不會影響employeeDetailsOriginal。

談談 Object.assign()

Object.assign()是我們常常用到的方法，其實這個方法就是淺拷貝。可是它又有一點特殊的地方，就是能夠處理第一層的深拷貝。

var employeeDetailsOriginal = {  
  name: '前端小智',
  family: {
    name: '前端你們庭'
  }
};

var employeeDetailsDuplicate = Object.assign({}, employeeDetailsOriginal );

employeeDetailsDuplicate.name = '王大治'
employeeDetailsDuplicate.family.name = '後端你們庭'

console.log(employeeDetailsOriginal ); 
// { name: "前端小智", family: {name: "後端你們庭"} }
console.log(employeeDetailsDuplicate);
// { name: "王大冶智", family: {name: "後端你們庭"} }
複製代碼

看上面的例子，屬性name的值並無跟着變，可是屬性中family的name的值跟着變了。

如何實現深拷貝

惟一的做法就是克隆這個對象。

對於簡單的JSON對象，最簡單的方法是

var objectIsNew  = JSON.parse(JSON.stringify(objectIsOld));

//若是使用jQuery，可使用：

// 淺拷貝
var objectIsNew = jQuery.extend({}, objectIsOld);

// 深拷貝
var objectIsNew = jQuery.extend(true, {}, objectIsOld);
複製代碼

純JS方法來深拷貝對象(並不是最佳方法)

function keepCloning(objectpassed) {
  if (objectpassed=== null || typeof objectpassed!== 'object') {
    return objectpassed;
  }
  
  // 臨時存儲原始的obj的構造
  var temporary_storage = objectpassed.constructor(); 
  for (var key in objectpassed) {
    temporary_storage[key] = keepCloning(objectpassed[key]);
  }
   return temporary_storage;
}

var employeeDetailsOriginal = {  
  name: '前端小智', 
  age: 18, 
  Profession: '前端開發' 
};

var employeeDetailsDuplicate = (keepCloning(employeeDetailsOriginal));

employeeDetailsOriginal.name = "前端大治";

console.log(employeeDetailsOriginal);
console.log(employeeDetailsDuplicate);
複製代碼