JavaScript基礎(chǔ)之?dāng)?shù)據(jù)類型

pinecone 發(fā)布于2019-08-21 12:00 / 2896人閱讀

摘要：原始數(shù)據(jù)類型和原始數(shù)據(jù)類型實在太簡單，所以只簡單劃幾個重點原始數(shù)據(jù)類型不可改變原始數(shù)據(jù)類型一個非常重要的特征就是不可改變。引用數(shù)據(jù)類型這里的不是狹義的，包含的預(yù)定義引用類型，對，這些都是引用數(shù)據(jù)類型。

JavaScript是腳本語言

計算機語言可以分為三類，機器語言、匯編語言、高級語言。高級語言又可以簡單分為解釋類和編譯類。這個知道就夠了。

機器語言: 計算機所能識別的二進(jìn)制語言，一般也不會直接拿來用于編程，無法理解且難以記憶
匯編語言: 底層程序可以直接理解的指令，一般是英文縮寫，一般簡短、簡單（功能簡單），只能做一些非常細(xì)微的操作，復(fù)雜的操作往往伴隨著大量的指令，我等一般接觸不多
高級語言: 簡單理解，我們平常接觸到的聽說過的基本都是高級語言。高級語言又分為解釋類和編譯類。解釋類語言和編譯類語言都需要轉(zhuǎn)換成機器語言才能被機器執(zhí)行，區(qū)別在于轉(zhuǎn)換的時間，解釋類語言也就是一般通稱的腳本語言，依賴于解釋器，邊解釋邊執(zhí)行，編譯類是全部轉(zhuǎn)換（編譯）好了，打包拿出去執(zhí)行。JavaScript不需要編譯，但是需要在自己的解釋器上執(zhí)行，比如我們常用的瀏覽器。

內(nèi)存、地址、指針

有過C語言基礎(chǔ)的人一定聽說過這么一句話，指針是C語言的靈魂。但是似乎在JavaScript中，并沒有接觸過所謂的指針的概念，但JavaScript的解釋器（JavaScript引擎）不管用什么編寫，有的是C，有的是C++，也或者是Java，甚至是JavaScript自舉實現(xiàn)的JavaScript解釋器（元循環(huán)虛擬機），都逃不脫內(nèi)存和指針，在JaVaScript中也有體現(xiàn)。所以了解下這些概念，對于學(xué)習(xí)JavaScript，總歸是有好處的。

計算機內(nèi)存最小單位是位，8位一個字節(jié)（byte），實際計算機中，內(nèi)存最小單位是字節(jié)（byte），通俗來講，可以把內(nèi)存條當(dāng)做內(nèi)存，計算機運行時臨時存儲數(shù)據(jù)的地方。也可以把它看做一個大的圖書館，有無數(shù)個格子，每個格子都有一個編號，這個編號就是地址，每個地址對應(yīng)唯一一段內(nèi)存。我們通常所說的系統(tǒng)為數(shù)據(jù)分配一段內(nèi)存，也就是給這個數(shù)據(jù)分配格子，一個格子放不下，那就給分三五個格子來放。而指針則是固定占用4個格子（4byte），里面放的不是真實的數(shù)據(jù)，而是放的另外一段內(nèi)存的地址，只是個地址。

原始數(shù)據(jù)類型

Undefined、Null、Boolean、Number、String和Symbol（ES6）

原始數(shù)據(jù)類型實在太簡單，所以只簡單劃幾個重點：

原始數(shù)據(jù)類型不可改變 原始數(shù)據(jù)類型一個非常重要的特征就是不可改變。原始數(shù)據(jù)類型是保存在棧中的，一旦聲明一個變量 var a = "老李";解釋器會申請一塊內(nèi)存來存儲"老李"，a是標(biāo)識符（標(biāo)識符存儲的是內(nèi)存地址，但在經(jīng)過解釋/編譯后會就不需要了），如果此時其他操作嘗試修改a，比如a += "，你好！";，此時打印a，雖然會輸出"老李，你好！";但是實際這其中改變的是a的地址指向，解釋器會為"老李，你好！"申請一片新的內(nèi)存來存儲，a中存儲的指向改變了，原先的"老李"所占用的內(nèi)存會被回收但本身并未被改變。

原始數(shù)據(jù)類型是按值傳遞 原始數(shù)據(jù)類型的賦值，也是新開辟一片內(nèi)存地址來存放新的指針和值，比如：var b = a;雖然看起來b和a一樣，但實際上b和a一點點關(guān)系都沒有，各自有各自的標(biāo)識符和占用的內(nèi)存，只是剛好值相同。

引用數(shù)據(jù)類型

Object
這里的Object不是狹義的Object，包含JavaScript的預(yù)定義引用類型：Object、Array、Date、Boolean、Number、String，對，這些都是引用數(shù)據(jù)類型。也就是一個數(shù)字/日期/布爾值/字符串他們的字面量聲明方式和構(gòu)造函數(shù)聲明方式會造成完全不一樣的結(jié)果。也就是上面劃的兩個重點，這里需要重新劃一下。

引用數(shù)據(jù)類型可以改變 我想說的不是這句廢話，引用數(shù)據(jù)類型和原始數(shù)據(jù)類型存儲在棧和堆中，棧中存儲的是標(biāo)識符和指針，堆中存儲的才是實際地址。畫個表(表也懶得畫了，下面的湊活看)吧：

var a = 1;
var a1 = a;
var b = {value: 1};
var b1 = b;
var c = new Object(1);
var c1 = c;
var d = new Number(1);
var d1 = d;

          棧                                               堆    
a         1                                                無
a1        1（和a的1占用的不同的內(nèi)存）                          無
b         指針，{value: 1}所占的內(nèi)存地址                      {value: 1}
b1        指針，指向和b相同，但指針本身存儲在新的內(nèi)存中           同上，且是同一塊內(nèi)存中的相同的值
c         指針，1所占的內(nèi)存地址                               1（object）
c1        指針，1所占的內(nèi)存地址，但指針本身存儲在新的內(nèi)存中        同上，且是同一塊內(nèi)存中的相同的值
d         指針，1所占的內(nèi)存地址                               1（number）
d1        指針，1所占的內(nèi)存地址，但指針本身存儲在新的內(nèi)存中        同上，且是同一塊內(nèi)存中的相同的值

簡單講，原始數(shù)據(jù)類型，永遠(yuǎn)是一個標(biāo)識符對應(yīng)一個值（一段內(nèi)存）且都存放在棧里；引用數(shù)據(jù)類型永遠(yuǎn)是一個標(biāo)識符對應(yīng)一個指針指向同一個值（同一段內(nèi)存），前二者存儲在棧中，最后一個在堆中。來幾個例子幫助理解下：

var a = 1;
var a1 = a;

a1 = 2;

console.log(a, a1);      //1 2

這個很好理解大家各自有各自的標(biāo)識符和內(nèi)存地址，你變你的，不影響我。下一個例子：

var b = {value: 1};
var b1 = b;

b1.value = 2;

console.log(b.value, b1.value)    //2 2

也好理解，b和b1指向的是同一個東西，簡單理解就是b和b1共用同一個東西。b1改完了b再來訪問，拿到的肯定是改后的。下一個例子：

var c = new Object(1);
var c1 = c;

c1 = 2;

console.log(c, c1)        //{[[PrimitiveValue]]: 1}  2  PrimitiveValue就是指的原始值，這里其實只是將原始值1包裝成Object，而這個原始值1依然不可更改

也很簡單，c1 = 2;這句話重新聲明了c1，代表著指針的c1被回收了，c1被重新聲明為一個原始數(shù)據(jù)類型，這時候二者沒關(guān)系了，如果是換一個方法，比如：

var c = new Object(1);
var c1 = c;

c1.value = 1;

console.log(c, c1)  //{value: 1,[[PrimitiveValue]]: 1} {value: 1,[[PrimitiveValue]]: 1}

這樣就沒問題了。

參數(shù)中的原始數(shù)據(jù)和引用數(shù)據(jù)

原始數(shù)據(jù)類型是按值傳遞的，引用數(shù)據(jù)類型是按引用傳遞的，看例子：

var a = 1;
var b = {value: 1};

function foo(v){
    v = "new Value";
}

foo(a);

在函數(shù)調(diào)用時，其實進(jìn)行了如下操作：
將a賦值給v，也就是v = a;，創(chuàng)建了a的副本，此時v得到了自己的內(nèi)存，其中存放著1這個值，然后拿"new Value"去覆蓋1，然而這一切發(fā)生在a的副本上，和a完全沒有關(guān)系，所以此時打印出a，還是1。接著：

foo(b);

這個結(jié)果也很好猜，b也沒有變，同樣創(chuàng)建一個副本，副本有標(biāo)識符、指針，指針指向的也是b的指針指向的值，但是v = ”new Value“;執(zhí)行時，這個副本就被重新賦值位一個string了，原先那個指針被回收。接著：

var a = 1;
var b = {value: 1};
var c = new Number(1);

function foo(v){
    v.value = "new Value";
}

foo(a);
foo(b);
foo(c);

a依然是1，且不說原始數(shù)據(jù)不能被添加屬性，即便被添加也只是a的副本的事，和a沒一點關(guān)系；

b在函數(shù)執(zhí)行中同樣創(chuàng)建了副本，副本同樣有指針，指向了{value: 1}所在的實際地址，此時通過指針改變了存儲`{value:
1}`的內(nèi)存中的value值，所以此時再通過b去訪問，一樣是輸出改變后的值；

c和b原理一樣，只不過c本來沒有value屬性，所以會被添加一個value屬性，所以上面的abc結(jié)果分別是：

console.log（a);            // 1
console.log（b);            // {value: "new Value"} 
console.log（c);            // Number {value: "new Value", [[PrimitiveValue]]: 1}