UI鑒賞

注：本系列文章已升級最新版本：《JavaSscript 核心進階》第二版

var a = 20;
var b = 'abc';
var c = true;
var d = { m: 20 }

因為JavaScript具有自動垃圾回收機制，所以對于前端開發(fā)來說，內(nèi)存空間并不是一個經(jīng)常被提及的概念，很容易被大家忽視。特別是很多不是計算機專業(yè)的朋友在進入到前端之后，會對內(nèi)存空間的認知比較模糊，甚至有些人干脆就是一無所知。

當然也包括我自己。

在很長一段時間里認為內(nèi)存空間的概念在JS的學習中并不是那么重要?？僧斘一剡^頭來重新整理JS基礎時，發(fā)現(xiàn)由于對它的模糊認知，導致了許多知識理解得并不明白。比如最基本的引用數(shù)據(jù)類型和引用傳遞到底是怎么回事兒？淺復制與深復制有什么不同？閉包到底是什么？等等。

因此，想要對JS的理解更加深刻，就必須對內(nèi)存空間有一個清晰的認知。

在學習內(nèi)存空間之前，我們需要對三種數(shù)據(jù)結構有一個清晰的理解。他們分別是堆(heap)，棧(stack)與隊列(queue)。

一、棧數(shù)據(jù)結構

與C/C++不同，JavaScript中并沒有嚴格意義上區(qū)分棧內(nèi)存與堆內(nèi)存。

一般情況是基礎數(shù)據(jù)類型，在棧內(nèi)存中維護，引用數(shù)據(jù)類型，在堆內(nèi)存中維護，棧內(nèi)存和堆內(nèi)存沒有本質差別，但是棧內(nèi)存是從地址高位開始分配，堆內(nèi)存從地址低位開始分配，這里要結合函數(shù)調用棧來一起理解

但是在某些場景，我們?nèi)匀恍枰跅?shù)據(jù)結構的思維來實現(xiàn)一些功能，比如 JavaScript 的執(zhí)行上下文（關于執(zhí)行上下文我會在下一篇文章中總結）。執(zhí)行上下文的執(zhí)行順序借用了棧數(shù)據(jù)結構的存取方式(也就是后面我們會經(jīng)常提到的函數(shù)調用棧)。因此理解棧數(shù)據(jù)結構的原理與特點十分重要。

要簡單理解棧的存取方式，我們可以通過類比乒乓球盒子來分析。如下圖左側。

乒乓球盒子與棧類比

這種乒乓球的存放方式與棧中存取數(shù)據(jù)的方式如出一轍。處于盒子中最頂層的乒乓球5，它一定是最后被放進去，但可以最先被使用。而我們想要使用底層的乒乓球1，就必須將上面的4個乒乓球取出來，讓乒乓球1處于盒子頂層。這就是?？臻g先進后出，后進先出的特點。圖中已經(jīng)詳細的表明了?？臻g的存儲原理。

二、堆數(shù)據(jù)結構

堆數(shù)據(jù)結構是一種樹狀結構。它的存取數(shù)據(jù)的方式，則與書架與書非常相似。

書雖然也整齊的存放在書架上，但是我們只要知道書的名字，就可以很方便的取出我們想要的書，而不用像從乒乓球盒子里取乒乓一樣，非得將上面的所有乒乓球拿出來才能取到中間的某一個乒乓球。好比在JSON格式的數(shù)據(jù)中，我們存儲的key-value是可以無序的，因為順序的不同并不影響我們的使用，我們只需要關心書的名字。

三、隊列

在JavaScript中，理解隊列數(shù)據(jù)結構的目的主要是為了清晰的明白事件循環(huán)（Event Loop）的機制到底是怎么回事。在后續(xù)的章節(jié)中我會詳細分析事件循環(huán)機制。

隊列是一種先進先出（FIFO）的數(shù)據(jù)結構。正如排隊過安檢一樣，排在隊伍前面的人一定是最先過檢的人。用以下的圖示可以清楚的理解隊列的原理。

四、變量對象與基礎數(shù)據(jù)類型

在新的 ECMAScript 版本中，此處的變量對象，應該叫做環(huán)境記錄對象更為標準，但變量對象更有利于簡化理解內(nèi)部機制，所以本系列文章不做更改

JavaScript的執(zhí)行上下文生成之后，會創(chuàng)建一個叫做變量對象的特殊對象（具體會在下一篇文章與執(zhí)行上下文一起總結），JavaScript的基礎數(shù)據(jù)類型往往都會保存在變量對象中。

基礎數(shù)據(jù)類型都是一些簡單的數(shù)據(jù)段，JavaScript中有5種基礎數(shù)據(jù)類型，分別是Undefined、Null、Boolean、Number、String。基礎數(shù)據(jù)類型都是按值訪問，我們可以直接操作保存在變量中的實際值。

ES6中新加了一種基礎數(shù)據(jù)類型Symbol，可以先不用考慮他

五、引用數(shù)據(jù)類型與堆內(nèi)存

與其他語言不同，JS的引用數(shù)據(jù)類型，比如數(shù)組Array，它們值的大小是不固定的。引用數(shù)據(jù)類型的值是保存在堆內(nèi)存中的對象。JavaScript不允許直接訪問堆內(nèi)存中的數(shù)據(jù)，因此我們不能直接操作對象的堆內(nèi)存空間。在操作對象時，實際上是在操作對象的引用而不是實際的對象。因此，引用類型的值都是按引用訪問的。這里的引用，我們可以理解為保存在變量對象中的一個地址，該地址與堆內(nèi)存的實際值相關聯(lián)。

為了更好的搞懂變量對象與堆內(nèi)存，我們可以結合以下例子與圖解進行理解。

var a1 = 0;   // 變量對象
var a2 = 'this is string'; // 變量對象
var a3 = null; // 變量對象

var b = { m: 20 }; // 變量b存在于變量對象中，{m: 20} 作為對象存在于堆內(nèi)存中
var c = [1, 2, 3]; // 變量c存在于變量對象中，[1, 2, 3] 作為對象存在于堆內(nèi)存中

上例圖解

當我們要訪問堆內(nèi)存中的引用數(shù)據(jù)類型時，實際上我們首先是從變量對象中獲取了該對象的地址引用（或者地址指針），然后再從堆內(nèi)存中取得我們需要的數(shù)據(jù)。

理解了JS的內(nèi)存空間，我們就可以借助內(nèi)存空間的特性來驗證一下引用類型的一些特點。

在前端面試中我們常常會遇到這樣一個類似的題目

// demo01.js
var a = 20;
var b = a;
b = 30;

// 這時a的值是多少？

// demo02.js
var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

// 這時m.a的值是多少

在變量對象中的數(shù)據(jù)發(fā)生復制行為時，系統(tǒng)會自動為新的變量分配一個新值。var b = a執(zhí)行之后，a與b雖然值都等于20，但是他們其實已經(jīng)是相互獨立互不影響的值了。具體如圖。所以我們修改了b的值以后，a的值并不會發(fā)生變化。

demo01圖解

在demo02中，我們通過var n = m執(zhí)行一次復制引用類型的操作。引用類型的復制同樣也會為新的變量自動分配一個新的值保存在變量對象中，但不同的是，這個新的值，僅僅只是引用類型的一個地址指針。當?shù)刂分羔樝嗤瑫r，盡管他們相互獨立，但是在變量對象中訪問到的具體對象實際上是同一個。如圖所示。

因此當我改變n時，m也發(fā)生了變化。這就是引用類型的特性。

demo02圖解

通過內(nèi)存的角度來理解，是不是感覺要輕松很多？除此之外，我們還可以以此為基礎，一步一步的理解JavaScript的執(zhí)行上下文，作用域鏈，閉包，原型鏈等重要概念。其他的我會在以后的文章慢慢總結，敬請期待。

六、內(nèi)存空間管理

因為JavaScript具有自動垃圾收集機制，所以我們在開發(fā)時好像不用關心內(nèi)存的使用問題，內(nèi)存的分配與回收都完全實現(xiàn)了自動管理。但是根據(jù)以往的開發(fā)經(jīng)驗，了解內(nèi)存機制有助于自己清晰的認識到自己寫的代碼在執(zhí)行過程中發(fā)生過什么，從而寫出性能更加優(yōu)秀的代碼。

關心內(nèi)存是一件非常重要的事情。

JavaScript的內(nèi)存生命周期

1. 分配你所需要的內(nèi)存
2. 使用分配到的內(nèi)存（讀、寫）
3. 不需要時將其釋放、歸還

為了便于理解，我們使用一個簡單的例子來解釋這個周期。

var a = 20;  // 在內(nèi)存中給數(shù)值變量分配空間
alert(a + 100);  // 使用內(nèi)存
a = null; // 使用完畢之后，釋放內(nèi)存空間

第一步和第二步我們都很好理解，JavaScript在定義變量時就完成了內(nèi)存分配。第三步釋放內(nèi)存空間則是我們需要重點理解的一個點。

JavaScript有自動垃圾收集機制，那么這個自動垃圾收集機制的原理是什么呢？其實很簡單，就是找出那些不再繼續(xù)使用的值，然后釋放其占用的內(nèi)存。垃圾收集器會每隔固定的時間段就執(zhí)行一次釋放操作。

在JavaScript中，最常用的是通過標記清除的算法來找到哪些對象是不再繼續(xù)使用的，因此a = null其實僅僅只是做了一個釋放引用的操作，讓 a 原本對應的值失去引用，脫離執(zhí)行環(huán)境，這個值會在下一次垃圾收集器執(zhí)行操作時被找到并釋放。而在適當?shù)臅r候解除引用，是為頁面獲得更好性能的一個重要方式。

需要注意的是，在局部作用域中，當函數(shù)執(zhí)行完畢，局部變量也就沒有存在的必要了，因此垃圾收集器很容易做出判斷并回收。但是全局變量什么時候需要釋放內(nèi)存空間則很難判斷，因此在我們的開發(fā)中，原則上應該避免使用全局變量。

要詳細了解垃圾收集機制，建議閱讀《JavaScript高級編程》中的4.3節(jié)