介紹

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

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

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

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

原生類型賦值

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

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

　　在這個示例中，a的值被設(shè)置為hello，b的值也被設(shè)置為hello。如果我們將b的值修改，a的值不會發(fā)生變化。a和b之間不存在任何關(guān)聯(lián)。

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

對象類型賦值

　　對象類型賦值的工作方式則不同。將一個對象類型的值賦值給一個變量會執(zhí)行下面這兩步操作：

• 在內(nèi)存中創(chuàng)建一個對象
• 將該對象的引用賦值給變量

　　這會發(fā)生什么呢？讓我們看一下：

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

　　第一行在內(nèi)存中創(chuàng)建了一個對象{ name: 'Joe' }，然后將該對象的引用賦值給變量a。第二行將同一對象的引用又賦值給了變量b。

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

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

　　由于a和b的值指向內(nèi)存中同一對象的引用，所以對變量b的屬性的修改會實際影響到a和b。

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

const a = ['foo'];
const b = a;
b[0] = 'bar';
console.log(b); // ["bar"]
console.log(a); // ["bar"]

這種變化也適用于函數(shù)參數(shù)

　　這些賦值規(guī)則同樣也適用于將對象傳遞給函數(shù)的時候。讓我們看看下面的例子：

const a = { name: 'Joe' };
function doSomething(val) {
val.name = 'Bip';
}
doSomething(a);
console.log(a); // { name: "Bip" }

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

防止意外的修改

　　在多數(shù)情況下，這種方式是符合預(yù)期的。這可以讓我們非常方便地將同一對象的引用賦值給不同的變量，不過有時候也會引起一些意想不到的結(jié)果，當(dāng)我們改變對象時，這種行為可能會導(dǎo)致一些非常令人困惑的bug。　　

有幾種方法可以防止這種行為的發(fā)生，這里我會介紹其中的幾個，但肯定不止這幾種方法。

JavaScript展開操作符（...）

　　展開操作符是對對象或數(shù)組進(jìn)行淺拷貝的一個好方法。

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

有關(guān)“淺拷貝”

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

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',
//   },
// }

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

使用Object.assign

　　Object.assign可以用來基于一個對象創(chuàng)建另一個新對象。使用方式如下：

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

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

序列化和反序列化

　　序列化和反序列化一個對象可以實現(xiàn)對象的深拷貝，最常見的方法是使用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',
//   },
// }

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

實現(xiàn)深拷貝的第三方庫

　　使用第三方庫來實現(xiàn)深拷貝在實際工作中很常見，特別是當(dāng)你對要操作的對象的結(jié)構(gòu)和層級不是很清楚時。這些庫提供的函數(shù)通常都是通過遞歸操作的方式來實現(xiàn)上述對象淺拷貝的功能。

結(jié)論

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

到此這篇關(guān)于JS基本原理：對象類型賦值和原生類型賦值的文章就介紹到這了,更多相關(guān)js對象類型賦值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論