JS基本原理：對象類型賦值和原生類型賦值

介紹

　　在本文中，我試圖以最簡潔的方式來闡明JavaScript編程原理中對象類型賦值和原生類型賦值之間的區別，以及它們各自是如何工作的。這也是我希望在我的JavaScript編程生涯早期就已經理解的東西。

JS中的原生類型和對象類型

　　首先，讓我們回顧一下JavaScript中不同的原生類型和對象類型。
　　原生類型：Boolean，Null，Undefined，Number，BigInt（可能不常見），String，Symbol（可能不常見）。
　　對象類型：Object，Array，Date，以及許多其它類型。

原生類型賦值和對象類型賦值有什麼不同？

原生類型賦值

　　將一個原生類型的值賦值給一個變數非常簡單，看下麵的例子：

const a = 'hello';
const b = a;

　　在這個示例中，a的值被設置為hello，b的值也被設置為hello。如果我們將b的值修改，a的值不會發生變化。a和b之間不存在任何關聯。

const b = 'foobar';
console.log(a); // "hello"
console.log(b); // "foobar"

對象類型賦值

　　對象類型賦值的工作方式則不同。將一個對象類型的值賦值給一個變數會執行下麵這兩步操作：

• 在記憶體中創建一個對象
• 將該對象的引用賦值給變數

　　這會發生什麼呢？讓我們看一下：

const a = { name: 'Joe' };
const b = a;

　　第一行在記憶體中創建了一個對象{ name: 'Joe' }，然後將該對象的引用賦值給變數a。第二行將同一對象的引用又賦值給了變數b。

　　接下來，讓我們修改分配給b的對象的一個屬性：

b.name = 'Jane';
console.log(b); // { name: "Jane" }
console.log(a); // { name: "Jane" }

　　由於a和b的值指向記憶體中同一對象的引用，所以對變數b的屬性的修改會實際影響到a和b。

　　我們在數組中也可以很清楚地看到這一變化：

const a = ['foo'];
const b = a;

b[0] = 'bar';

console.log(b); // ["bar"]
console.log(a); // ["bar"]

這種變化也適用於函數參數

　　這些賦值規則同樣也適用於將對象傳遞給函數的時候。讓我們看看下麵的例子：

const a = { name: 'Joe' };

function doSomething(val) {
  val.name = 'Bip';
}

doSomething(a);
console.log(a); // { name: "Bip" }

　　對傳遞給函數的對象的值進行修改時要小心，除非這是有意而為之的（但我相信在多數情況下你並不希望這樣）。

防止意外的修改

　　在多數情況下，這種方式是符合預期的。這可以讓我們非常方便地將同一對象的引用賦值給不同的變數，不過有時候也會引起一些意想不到的結果，當我們改變對象時，這種行為可能會導致一些非常令人困惑的bug。
　　有幾種方法可以防止這種行為的發生，這裡我會介紹其中的幾個，但肯定不止這幾種方法。

JavaScript展開操作符（...）

　　展開操作符是對對象或數組進行淺拷貝的一個好方法。

const a = { name: 'Joe' };
const b = { ...a };
b.name = 'Jane';
console.log(b); // { name: "Jane" }
console.log(a); // { name: "Joe" }

有關“淺拷貝”

　　理解淺拷貝和深拷貝非常重要。對於只有一層深度的對象而言，淺拷貝沒有問題，但是對於嵌套的對象則會有問題，讓我們看下麵的例子：

const a = {
  name: 'Joe',
  dog: {
    name: 'Daffodil',
  },
};
const b = { ...a };

b.name = 'Pete';
b.dog.name = 'Frenchie';
console.log(a);
// {
//   name: 'Joe',
//   dog: {
//     name: 'Frenchie',
//   },
// }

　　展開操作符只實現了對象的一層深度的拷貝，但是第二層的屬性在記憶體中仍然指向了同一對象。為瞭解決這個問題，人們想到了一些方法來進行“深拷貝”，例如第三方庫deep-copy，或者序列化和反序列化對象。

使用Object.assign

　　Object.assign可以用來基於一個對象創建另一個新對象。使用方式如下：

const a = { name: 'Joe' };
const b = Object.create({}, a);

　　註意，這仍然是一個淺拷貝！

序列化和反序列化

　　序列化和反序列化一個對象可以實現對象的深拷貝，最常見的方法是使用JSON.stringify和JSON.parse。

const a = {
  name: 'Joe',
  dog: {
    name: 'Daffodil',
  },
};
const b = JSON.parse(JSON.stringify(a));
b.name = 'Eva';
b.dog.name = 'Jojo';
console.log(a);
// {
//   name: 'Joe',
//   dog: {
//     name: 'Daffodil',
//   },
// }

console.log(b);
// {
//   name: 'Eva',
//   dog: {
//     name: 'Jojo',
//   },
// }

　　不過這種方法也存在缺點，序列化和反序列化不會保留複雜類型的對象例如函數。

實現深拷貝的第三方庫

　　使用第三方庫來實現深拷貝在實際工作中很常見，特別是當你對要操作的對象的結構和層級不是很清楚時。這些庫提供的函數通常都是通過遞歸操作的方式來實現上述對象淺拷貝的功能。

結論

　　也許本文討論的這些細節看起來有點複雜，但如果你對JS中原生類型賦值和對象類型賦值有所瞭解的話，這對你而言就是小菜一碟了。你可以嘗試一下上文提到的這些例子，如果願意的話，你也完全可以嘗試著自己實現一個對象深拷貝的函數。

原文地址：JS Fundamentals: Object Assignment vs. Primitive Assignment