js中的棧、堆、隊列、內存空間

棧(stack) 、堆(heap)、 隊列(queue)是js的三種數據結構。前端

棧(stack)

棧的特色是"LIFO,即後進先出(Last in, first out)"。數據存儲時只能從頂部逐個存入,取出時也需從頂部逐個取出。《前端進擊的巨人(一):執行上下文與執行棧,變量對象》中解釋執行棧時,舉了一個乒乓球盒子的例子,來演示棧的存取方式,這裏再舉個栗子搭積木。算法

舉個栗子:乒乓球盒子/搭建積木
segmentfault

JavaScript中Array數組模擬棧:數組

var arr = [1, 2, 3, 4, 5];

arr.push(6); // 存入數據 arr -> [1, 2, 3, 4, 5, 6]
arr.pop();   // 取出數據 arr -> [1, 2, 3, 4, 5]

 

堆(heap)

堆的特色是"無序"key-value"鍵值對"存儲方式。瀏覽器

舉個栗子:書架存書數據結構

咱們想要在書架上找到想要的書,最直接的方式就是經過查找書名,書名就是咱們的key。拿着這把key,就能夠輕鬆檢索到對應的書籍。閉包

"堆的存取方式跟順序沒有關係,不侷限出入口"函數

 

隊列 (queue)

隊列的特色是是"FIFO,即先進先出(First in, first out)" 。
數據存取時"從隊尾插入,從隊頭取出"oop

"與棧的區別:棧的存入取出都在頂部一個出入口,而隊列分兩個,一個出口,一個入口"spa

舉個栗子:排隊取餐

JavaScript中Array數組模擬隊列:

var arr = [1, 2, 3, 4, 5];

// 隊尾in
arr.push(6);    // 存入 arr -> [1, 2, 3, 4, 5, 6]
// 隊頭out
arr.shift();    // 取出 arr -> [2, 3, 4, 5, 6]

 

棧、堆、隊列在JavaScript中的應用

1. 代碼運行方式(棧應用/函數調用棧)

《前端進擊的巨人(一):執行上下文與執行棧,變量對象》詳解了JavaScript運行時的函數調用過程,而其中執行棧(函數調用棧)就是用到棧的數據結構。

JavaScript中函數的執行過程,其實就是一個入棧出棧的過程:

  1. 當腳本要調用一個函數時,JS解析器把該函數推入棧中(push)並執行
  2. 當函數運行結束後,JS解析器將它從堆棧中推出(pop)

具體執行過程可翻閱上篇文章《前端進擊的巨人(一):執行上下文與執行棧,變量對象》,這裏再也不贅述。

2. 內存存儲(棧、堆)

JavaScript中變量類型有兩種:

  1. 基礎類型(Undefined, Null, Boolean, Number, String, Symbol)一共6種
  2. 引用類型(Object)

JS中的基礎數據類型,這些值都有固定的大小,每每都保存在棧內存中(閉包除外),由系統自動分配存儲空間。咱們能夠直接操做保存在棧內存空間的值,所以基礎數據類型都是按值訪問 數據在棧內存中的存儲與使用方式相似於數據結構中的堆棧數據結構,遵循後進先出的原則。

JS的引用數據類型,好比數組Array,它們值的大小是不固定的。引用數據類型的值是保存在堆內存中的對象。JS不容許直接訪問堆內存中的位置,所以咱們不能直接操做對象的堆內存空間。在操做對象時,其實是在操做對象的引用而不是實際的對象。所以,引用類型的值都是按引用訪問的。這裏的引用,咱們能夠粗淺地理解爲保存在棧內存中的一個地址,該地址與堆內存的實際值相關聯。

 

3. 事件輪詢(隊列)

JavaScript中事件輪詢(Event Loop)的執行機制,就是採用隊列的存取方式,因事件輪詢(Event Loop)也是JS基礎中的一個比較難理解的知識點,後續另開一篇章再做詳細探究。

 

深淺拷貝

將一個變量的值賦值給另外一個變量,至關於在棧內存中建立了一個新的內存空間,而後從棧中複製值,存儲到這個新空間中。對於基本類型,棧中存儲的就是它自身的值,因此新內存空間存儲的也是一個值。直接改變新變量的值,不會影響到舊變量的值,由於他們值存儲的內存空間不一樣。

// 基本類型複製變量
var a = 10;
var b = a;
b = 20;

a // 10
b // 20

而對於引用類型來講,一樣是複製棧中存儲的值。可是棧存儲的只是其引用地址,其具體的值存儲在堆中。變量複製僅複製棧中存儲的值,不會複製堆中存儲的值,因此新變量在棧中的值是一個地址指針。

// 引用類型複製變量
var a = { age: 27 };
var b = a;
b.age = 29;

a.age == b.age; // 29

可見,變量複製賦值,都屬於棧存儲拷貝,所以深淺拷貝能夠這樣區分:

  • "淺拷貝:棧存儲拷貝"
  • "深拷貝:棧堆存儲拷貝"

深拷貝會同時開闢新的棧內存,堆內存空間。

// 利用JSON對象方法實現深拷貝
var a = { age: 27 };
var b = JSON.parse(JSON.stringify(a));
b.age = 29;

a.age // 27
b.age // 29

函數傳參數是按值傳遞?按引用傳遞?

var person = {
 age: 27
};
function foo (person) {
  person.age = 29;
}
foo(person);
person.age // 29;

函數調用時,會對參數賦值。而參數傳遞過程其實一樣是變量複製的過程,因此它是按值傳遞。var person = person,由於傳遞參數是對象時,變量複製僅複製的棧存儲(淺拷貝),因此修改對象屬性會形成外部變量對象的修改。

至此,當咱們理清棧、堆數據結構,以及JS中數據類型存取方式。深淺拷貝問題也就通順了。

 

內存空間

內存空間管理

JavaScript執行過程當中內存分配:

  1. 爲變量對象分配須要的內存
  2. 在分配到的內存中進行讀/寫操做
  3. 再也不使用時將其銷燬,釋放內存

內存管理不善,會出現內存泄露,形成瀏覽器內存佔用過多,頁面卡頓等問題。

 

垃圾回收機制

JavaScript中有自動垃圾回收機制,會經過標記清除的算法識別哪些變量對象再也不使用,對其進行銷燬。開發者也可在代碼中手動設置變量值爲null(a = null)進行標記清除,讓其失去引用,以便下一次垃圾回收時進行有效回收。

局部環境中,函數執行完成後,函數局部環境聲明的變量再也不須要時,就會被垃圾回收銷燬(理想的狀況下,閉包會阻止這一過程)。

全局環境只有頁面退出時纔會出棧,解除變量引用。因此開發者應儘可能避免在全局環境中建立全局變量,如需使用,也要在不須要時手動標記清除,將其內存釋放掉。

 

爲何會有棧內存和堆內存之分?

一般與垃圾回收機制有關。爲了使程序運行時佔用的內存最小。

當一個方法執行時,每一個方法都會創建本身的內存棧,在這個方法內定義的變量將會逐個放入這塊棧內存裏,隨着方法的執行結束,這個方法的內存棧也將天然銷燬了。所以,全部在方法中定義的變量都是放在棧內存中的;

當咱們在程序中建立一個對象時,這個對象將被保存到運行時數據區中,以便反覆利用(由於對象的建立成本一般較大),這個運行時數據區就是堆內存。堆內存中的對象不會隨方法的結束而銷燬,即便方法結束後,這個對象還可能被另外一個引用變量所引用(方法的參數傳遞時很常見),則這個對象依然不會被銷燬,只有當一個對象沒有任何引用變量引用它時,系統的垃圾回收機制纔會在覈實的時候回收它。

相關文章
相關標籤/搜索