介紹

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

JS中的原生類型和對(duì)象類型

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

原生類型賦值和對(duì)象類型賦值有什么不同？

原生類型賦值

　　將一個(gè)原生類型的值賦值給一個(gè)變量非常簡(jiǎn)單，看下面的例子：

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

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

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

對(duì)象類型賦值

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

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

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

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

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

　　接下來，讓我們修改分配給b的對(duì)象的一個(gè)屬性：

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

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

　　我們?cè)跀?shù)組中也可以很清楚地看到這一變化：

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

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

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

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

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

防止意外的修改

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

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

JavaScript展開操作符（...）

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

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

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

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

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

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

使用Object.assign

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

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

　　注意，這仍然是一個(gè)淺拷貝！

序列化和反序列化

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

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

實(shí)現(xiàn)深拷貝的第三方庫(kù)

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

結(jié)論

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

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

最新評(píng)論