2019-06-06 JavaScript基本類(lèi)型與引用類(lèi)型的區(qū)別

ECMAScirpt 變量有兩種不同的數(shù)據(jù)類(lèi)型:基本類(lèi)型,引用類(lèi)型。也有其他的叫法,比如原始類(lèi)型和對(duì)象類(lèi)型,擁有方法的類(lèi)型和不能擁有方法的類(lèi)型,
還可以分為可變類(lèi)型和不可變類(lèi)型,其實(shí)這些叫法都是依據(jù)這兩種的類(lèi)型特點(diǎn)來(lái)命名的,大家愛(ài)叫啥就叫啥吧 。
1.基本類(lèi)型

基本的數(shù)據(jù)類(lèi)型有:`undefined,boolean,number,string,null.基本類(lèi)型的訪問(wèn)是按值訪問(wèn)的,就是說(shuō)你可以操作保存在變量中的實(shí)際的值。
基本類(lèi)型有以下幾個(gè)特點(diǎn):

1.基本類(lèi)型的值是不可變得:

任何方法都無(wú)法改變一個(gè)基本類(lèi)型的值,比如一個(gè)字符串:

var name = 'jozo';

name.toUpperCase(); // 輸出 'JOZO'

console.log(name); // 輸出  'jozo'

會(huì)發(fā)現(xiàn)原始的name并未發(fā)生改變,而是調(diào)用了toUpperCase()方法后返回的是一個(gè)新的字符串。
再來(lái)看個(gè):

var person = 'jozo';

person.age = 22;

person.method = function(){//...};

console.log(person.age); // undefined

console.log(person.method); // undefined

通過(guò)上面代碼可知,我們不能給基本類(lèi)型添加屬性和方法,再次說(shuō)明基本類(lèi)型時(shí)不可變得;
2.基本類(lèi)型的比較是值的比較:

只有在它們的值相等的時(shí)候它們才相等。
但你可能會(huì)這樣:


var a = 1;

var b = true;

console.log(a == b);//true

它們不是相等嗎?其實(shí)這是類(lèi)型轉(zhuǎn)換和 == 運(yùn)算符的知識(shí)了,也就是說(shuō)在用==比較兩個(gè)不同類(lèi)型的變量時(shí)會(huì)進(jìn)行一些類(lèi)型轉(zhuǎn)換。像上面的比較先會(huì)把true
轉(zhuǎn)換為數(shù)字1再和數(shù)字1進(jìn)行比較,結(jié)果就是true了。 這是當(dāng)比較的兩個(gè)值的類(lèi)型不同的時(shí)候==運(yùn)算符會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換,但是當(dāng)兩個(gè)值的類(lèi)型相同的時(shí)候,
即使是==也相當(dāng)于是===。


var a = 'jozo';

var b = 'jozo';

console.log(a === b);//true

3.基本類(lèi)型的變量是存放在棧區(qū)的(棧區(qū)指內(nèi)存里的棧內(nèi)存)

假如有以下幾個(gè)基本類(lèi)型的變量:


var name = 'jozo';

var city = 'guangzhou';

var age = 22;

那么它的存儲(chǔ)結(jié)構(gòu)如下圖:


image

棧區(qū)包括了 變量的標(biāo)識(shí)符和變量的值。
2.引用類(lèi)型

引用類(lèi)型會(huì)比較好玩有趣一些。

javascript中除了上面的基本類(lèi)型(number,string,boolean,null,undefined)之外就是引用類(lèi)型了,也可以說(shuō)是就是對(duì)象了。對(duì)象是屬性和方法的集合。
也就是說(shuō)引用類(lèi)型可以擁有屬性和方法,屬性又可以包含基本類(lèi)型和引用類(lèi)型。來(lái)看看引用類(lèi)型的一些特性:
1.引用類(lèi)型的值是可變的

我們可為為引用類(lèi)型添加屬性和方法,也可以刪除其屬性和方法,如:

var person = {};//創(chuàng)建個(gè)控對(duì)象 --引用類(lèi)型

person.name = 'jozo';

person.age = 22;

person.sayName = function(){console.log(person.name);} 

person.sayName();// 'jozo'

delete person.name; //刪除person對(duì)象的name屬性

person.sayName(); // undefined

上面代碼說(shuō)明引用類(lèi)型可以擁有屬性和方法,并且是可以動(dòng)態(tài)改變的。

2.引用類(lèi)型的值是同時(shí)保存在棧內(nèi)存和堆內(nèi)存中的對(duì)象

javascript和其他語(yǔ)言不同,其不允許直接訪問(wèn)內(nèi)存中的位置,也就是說(shuō)不能直接操作對(duì)象的內(nèi)存空間,那我們操作啥呢? 實(shí)際上,是操作對(duì)象的引用,
所以引用類(lèi)型的值是按引用訪問(wèn)的。
準(zhǔn)確地說(shuō),引用類(lèi)型的存儲(chǔ)需要內(nèi)存的棧區(qū)和堆區(qū)(堆區(qū)是指內(nèi)存里的堆內(nèi)存)共同完成,棧區(qū)內(nèi)存保存變量標(biāo)識(shí)符和指向堆內(nèi)存中該對(duì)象的指針,
也可以說(shuō)是該對(duì)象在堆內(nèi)存的地址。
假如有以下幾個(gè)對(duì)象:

var person1 = {name:'jozo'};

var person2 = {name:'xiaom'};

var person3 = {name:'xiaoq'};

則這三個(gè)對(duì)象的在內(nèi)存中保存的情況如下圖:

image

3.引用類(lèi)型的比較是引用的比較

var person1 = '{}';

var person2 = '{}';

console.log(person1 == person2); // true

上面講基本類(lèi)型的比較的時(shí)候提到了當(dāng)兩個(gè)比較值的類(lèi)型相同的時(shí)候,相當(dāng)于是用 === ,所以輸出是true了。再看看:


var person1 = {};

var person2 = {};

console.log(person1 == person2); // false

可能你已經(jīng)看出破綻了,上面比較的是兩個(gè)字符串,而下面比較的是兩個(gè)對(duì)象,為什么長(zhǎng)的一模一樣的對(duì)象就不相等了呢?

別忘了,引用類(lèi)型時(shí)按引用訪問(wèn)的,換句話(huà)說(shuō)就是比較兩個(gè)對(duì)象的堆內(nèi)存中的地址是否相同,那很明顯,person1和person2在堆內(nèi)存中地址是不同的:

image

所以這兩個(gè)是完全不同的對(duì)象,所以返回false;
3.簡(jiǎn)單賦值

在從一個(gè)變量向另一個(gè)變量賦值基本類(lèi)型時(shí),會(huì)在該變量上創(chuàng)建一個(gè)新值,然后再把該值復(fù)制到為新變量分配的位置上:

var a = 10;

var b = a;

a ++ ;

console.log(a); // 11

console.log(b); // 10

此時(shí),a中保存的值為 10 ,當(dāng)使用 a 來(lái)初始化 b 時(shí),b 中保存的值也為10,但b中的10與a中的是完全獨(dú)立的,該值只是a中的值的一個(gè)副本,此后,
這兩個(gè)變量可以參加任何操作而相互不受影響。

也就是說(shuō)基本類(lèi)型在賦值操作后,兩個(gè)變量是相互不受影響的。

image

4.對(duì)象引用

當(dāng)從一個(gè)變量向另一個(gè)變量賦值引用類(lèi)型的值時(shí),同樣也會(huì)將存儲(chǔ)在變量中的對(duì)象的值復(fù)制一份放到為新變量分配的空間中。前面講引用類(lèi)型的時(shí)候提到,
保存在變量中的是對(duì)象在堆內(nèi)存中的地址,所以,與簡(jiǎn)單賦值不同,這個(gè)值的副本實(shí)際上是一個(gè)指針,而這個(gè)指針指向存儲(chǔ)在堆內(nèi)存的一個(gè)對(duì)象。那么賦值操作后,
兩個(gè)變量都保存了同一個(gè)對(duì)象地址,則這兩個(gè)變量指向了同一個(gè)對(duì)象。因此,改變其中任何一個(gè)變量,都會(huì)相互影響:

var a = {}; // a保存了一個(gè)空對(duì)象的實(shí)例

var b = a;  // a和b都指向了這個(gè)空對(duì)象

a.name = 'jozo';

console.log(a.name); // 'jozo'

console.log(b.name); // 'jozo'

b.age = 22;

console.log(b.age);// 22

console.log(a.age);// 22

console.log(a == b);// true

它們的關(guān)系如下圖:


image

因此,引用類(lèi)型的賦值其實(shí)是對(duì)象保存在棧區(qū)地址指針的賦值,因此兩個(gè)變量指向同一個(gè)對(duì)象,任何的操作都會(huì)相互影響

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容