全棧開發(fā)培訓(xùn)之js基本類型與引用類型的區(qū)別

更新時間:2018年02月04日11時26分來源:傳智播客瀏覽次數(shù):

ECMAScirpt 變量有兩種不同的數(shù)據(jù)類型：基本類型，引用類型。也有其他的叫法，比如原始類型和對象類型，擁有方法的類型和不能擁有方法的類型，還可以分為可變類型和不可變類型，其實這些叫法都是依據(jù)這兩種的類型特點來命名的。

1

一、基本類型

基本的數(shù)據(jù)類型有：`undefined，boolean，number，string，null.基本類型的訪問是按值訪問的，就是說你可以操作保存在變量中的實際的值。

基本類型有以下幾個特點：

1.基本類型的值是不可變得：

任何方法都無法改變一個基本類型的值，比如一個字符串：

var name = 'jozo';
name.toUpperCase(); // 輸出 'JOZO'
console.log(name); // 輸出 'jozo'

會發(fā)現(xiàn)原始的name并未發(fā)生改變，而是調(diào)用了toUpperCase()方法后返回的是一個新的字符串。

再來看個：

var person = 'jozo';
person.age = 22;
person.method = function(){//...};
console.log(person.age); // undefined
console.log(person.method); // undefined

通過上面代碼可知，我們不能給基本類型添加屬性和方法，再次說明基本類型時不可變得；

2.基本類型的比較是值的比較：

只有在它們的值相等的時候它們才相等。
但你可能會這樣：

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

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

var a = 'jozo';
var b = 'jozo';
console.log(a === b);//true

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

假如有以下幾個基本類型的變量：

var name = 'jozo';
var city = 'guangzhou';
var age = 22;

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

棧區(qū)包括了變量的標(biāo)識符和變量的值。

二、引用類型

引用類型會比較好玩有趣一些。

javascript中除了上面的基本類型(number,string,boolean,null,undefined)之外就是引用類型了，也可以說是就是對象了。對象是屬性和方法的集合。

也就是說引用類型可以擁有屬性和方法，屬性又可以包含基本類型和引用類型。來看看引用類型的一些特性：

1.引用類型的值是可變的

我們可為為引用類型添加屬性和方法，也可以刪除其屬性和方法，如：

var person = {};//創(chuàng)建個控對象 --引用類型
person.name = 'jozo';
person.age = 22;
person.sayName = function(){console.log(person.name);}
person.sayName();// 'jozo'
delete person.name; //刪除person對象的name屬性
person.sayName(); // undefined

上面代碼說明引用類型可以擁有屬性和方法，并且是可以動態(tài)改變的。

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

javascript和其他語言不同，其不允許直接訪問內(nèi)存中的位置，也就是說不能直接操作對象的內(nèi)存空間，那我們操作啥呢？實際上，是操作對象的引用，所以引用類型的值是按引用訪問的。

準(zhǔn)確地說，引用類型的存儲需要內(nèi)存的棧區(qū)和堆區(qū)（堆區(qū)是指內(nèi)存里的堆內(nèi)存）共同完成，棧區(qū)內(nèi)存保存變量標(biāo)識符和指向堆內(nèi)存中該對象的指針，也可以說是該對象在堆內(nèi)存的地址。

假如有以下幾個對象：

var person1 = {name:'jozo'};
var person2 = {name:'xiaom'};
var person3 = {name:'xiaoq'};

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

3.引用類型的比較是引用的比較

var person1 = '{}';
var person2 = '{}';
console.log(person1 == person2); // true

上面講基本類型的比較的時候提到了當(dāng)兩個比較值的類型相同的時候，相當(dāng)于是用 === ，所以輸出是true了。再看看：

var person1 = {};
var person2 = {};
console.log(person1 == person2); // false

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

別忘了，引用類型時按引用訪問的，換句話說就是比較兩個對象的堆內(nèi)存中的地址是否相同，那很明顯，person1和person2在堆內(nèi)存中地址是不同的：

所以這兩個是完全不同的對象，所以返回false;

3.簡單賦值

在從一個變量向另一個變量賦值基本類型時，會在該變量上創(chuàng)建一個新值，然后再把該值復(fù)制到為新變量分配的位置上：

var a = 10;
var b = a;
a ++ ;
console.log(a); // 11
console.log(b); // 10

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

也就是說基本類型在賦值操作后，兩個變量是相互不受影響的。

4.對象引用

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

var a = {}; // a保存了一個空對象的實例
var b = a; // a和b都指向了這個空對象
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

因此，引用類型的賦值其實是對象保存在棧區(qū)地址指針的賦值，因此兩個變量指向同一個對象，任何的操作都會相互影響。

本文版權(quán)歸傳智播客H5+全棧學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！

作者：傳智播客H5+全棧學(xué)院

首發(fā)：http://xamj520.com/subject/stackzly/index.shtml

上一篇：全棧開發(fā)培訓(xùn)之有關(guān)常量的所有知識！ 下一篇：全棧開發(fā)培訓(xùn)之this,self,parent三個關(guān)鍵字用法