JavaScript值型別和引用型別

JavaScript中對值型別和引用型別最為重要的知識點之一。

如果對它沒有良好的掌握，那麼JavaScript很多程式碼執行現象將無法解釋，當然也就無法順暢進行開發。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj={
    webName:"螞蟻部落",
    address:"青島市南區"
}
let newObj=obj;
newObj.webName="antzone";
console.log(obj.webName);

程式碼執行效果截圖如下：

上述程式碼中，我們修改的是newObj物件的webName屬性值，為何obj物件的相應屬性值也發生了改變。

如果掌握了值型別和引用型別，那麼就很容易理解出現上述結果的原因。

下面就通過通俗易通的語言介紹一下值型別資料與引用型別資料的各自特徵。

一.值型別資料：

值型別資料通俗的講就是簡單的資料段，JavaScript存在六種基本型別：

（1）.string

（2）.number

（3）.boolean

（4）.symbol（ES2015）

（5）.null

（6）.undefined值型別資料儲存在棧記憶體中，值型別資料直接儲存在變數中。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落";

字串是一個值型別資料，在記憶體中的儲存圖示如下：

值型別資料直接儲存在變數中。

下面我們再來進行如下操作，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落";
let str=webName;

程式碼將變數webName賦值給變數str，圖示如下：

值型別資料賦值，是將實際值複製一份給對應的變數。

上面的程式碼中，會將變數webName的值"螞蟻部落"複製一份，然後賦值給變數str。

兩個值型別資料是完全獨立的，操作其中的一個資料不會影響到另一個。

二.引用型別資料：

引用型別資料通常是由多個值構成，比如一個物件多個方法或者多個屬性。

引用型別資料與值型別資料在記憶體中的儲存方式有很大區別。

值型別資料儲存在棧記憶體中，而引用型別資料在棧記憶體中儲存的是一個地址。

此地址指向堆記憶體中資料的實際儲存的記憶體地址。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let obj={
    webName:"螞蟻部落",
    address:"青島市南區"
}

在記憶體中的儲存圖示如下：

也就是說變數obj中儲存的不是資料本身，而是指向實際資料的記憶體地址。

繼續進行操作，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
let obj={
    webName:"螞蟻部落",
    address:"青島市南區"
}
let newObj=obj;

在記憶體中的儲存圖示如下：

newObj=obj其實是將實際資料的記憶體地址賦值給變數newObj。

也就是說這兩個變數指向同一個實際資料，那麼文章開頭舉得例子就非常好理解了。

因為是指向同一個物件，所以修改就等同於修改obj。

三.包裝物件：

前面說過，值型別資料是一個簡單的資料段，引用型別的資料是由多值構成，比如具有方法或者屬性。

但是為什麼如下程式碼可以正常執行呢：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName="螞蟻部落";
console.log(webName.length);

可以正常輸出字串的長度。

為什麼值型別資料也具有屬性呢，這是因為字串會臨時包裝成一個物件。

當程式碼執行完畢後，此物件就會釋放。