語雀入口
https://www.yuque.com/along-n3gko/ezt5z9
介紹
堆疊（stack） 堆疊stack為自動分配的記憶體空間，它由系統自動釋放
堆（heap） 堆heap是動態分配的記憶體，大小不定也不會自動釋放
動態演示地址
http://latentflip.com/loupe
資料型別
- 基本型別：String、Number、Boolean、Null、Undefined、symbol（ES6）
- 基本型別在記憶體中占據空間小、大小固定 ，他們的值保存在堆疊(stack)空間，是按值來訪問
- 參考型別：Object、Array、Date、Function、Error、RegExp、Math、Number、String、Boolean、Globle，
- 參考型別占據空間大、大小不固定, 堆疊記憶體中存放地址指向堆(heap)記憶體中的物件，是按參考訪問的
堆疊
- 堆：用于參考資料型別（陣列，物件，函式）分配空間，從堆疊記憶體指向堆記憶體的資料結構
- 參考資料型別Object(Array，Date，RegExp，Function...)
- 堆記憶體釋放
- 讓所有參考堆記憶體空間地址的變數賦值為null即可，當堆記憶體沒有被任何的變數或者其他東西參考時，就會在瀏覽器執行垃圾回收的時候，被銷毀掉，
var obj = {'name': 'along'}
|
堆記憶體 |
|
|
{'name': 'along'} |
指標 |
obj2 = obj
|
堆記憶體 |
|
|
{'name': 'along'} |
指標 |
|
{'name': 'along'} |
指標 |
結論：你會發現，如果是參考型別復制的話，雖然會有兩個指標，但是指向都是同一個物件，這就會造成如果改變obj2值，也會造成obj值的改變，
如下圖所示：堆疊記憶體中存放的只是該物件的訪問地址， 在堆記憶體中為這個值分配空間 ， 由于這種值的大小不固定，因此不能把它們保存到堆疊記憶體中，但記憶體地址大小的固定的，因此可以將記憶體地址保存在堆疊記憶體中， 這樣，當查詢參考型別的變數時， 先從堆疊中讀取記憶體地址， 然后再通過地址找到堆中的值，
- 堆疊（先進后出/后進先出的資料結構）
- 堆疊基本五種資料型別： String、Number、Boolean、Null、Undefined、symbol（ES6）
- 堆疊記憶體釋放
- 全域作用域會在頁面關倍訓者重繪的時候釋放，
- 私有作用域一般情況下，當函式執行完成，所形成的私有作用域（堆疊記憶體）都會自動釋放掉，但是也有特殊的情況，（閉包）
- 結構特點
- 示例
var a = 2;
|
堆疊記憶體 |
|
|
a |
2 |
b = a
|
堆疊記憶體 |
|
|
a |
2 |
|
b |
2 |
結論：堆疊記憶體雖然復制了a，但是創建了新的佇列，修改b的值的同時也不會改變a的值，
代碼實作
使用陣列實作堆疊的結構
function Stack(){ let items = []; this.size = function(){ return items.length } this.push = function(item){ items.push(item) } this.pop = function(){ let item = items.pop() console.log('pop',item) return item } this.top = function(){ let length = items.length; console.log('top',items[length-1]) } this.show = function(){ console.log(items) } this.clear = function(){ items.length = 0 } this.isEmpty = function(){ console.log(items.length === 0) return items.length === 0 } } let newStack = new Stack(); newStack.push(12); newStack.show() newStack.top() newStack.pop(); newStack.isEmpty(); newStack.show() newStack.push(1); newStack.push(5); newStack.isEmpty(); newStack.top() newStack.show() newStack.clear(); newStack.show()
堆疊記憶體溢位
呼叫堆疊會一直增長，直到達到限制，瀏覽器硬編碼堆疊大小或記憶體耗盡，所以在用遞回函式時要給一個終止條件，
var count = 1; function fn() { count++; fn() } fn() //Maximum call stack size exceeded
History API與瀏覽器堆疊管理
pushState，它會向瀏覽器的歷史堆疊壓入一個url為設定值的記錄，并改變歷史堆疊的當前指標至堆疊頂，
history.pushState(stateObject, title, url)
stateObject:state是一個由 pushState()方法創建的、與歷史紀錄相關的JS物件，當用戶定向到一個新的狀態時，會觸發popstate事件，事件的state屬性包含了歷史紀錄的state物件，
title:目前大多瀏覽器都忽視，傳遞空即可
url：新歷史記錄的url地址
replaceState：與pushState引數相同，含義也相同，唯一的區別在于replaceState是替換瀏覽器歷史堆疊的當前歷史記錄為設定的url，需要注意的是，replaceState不會改動瀏覽器歷史堆疊的當前指標，
onpopstate：該事件是window的屬性，該事件會在呼叫瀏覽器的前進、后退以及執行history.forward、history.back、和history.go觸發，因為這些操作有一個共性，即修改了歷史堆疊的當前指標，在不改變document的前提下，一旦當前指標改變則會觸發onpopstate事件，
創建一個新的瀏覽器記錄狀態
const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'
history.pushState(state, title, url)
總結：
瀏覽器針對每個頁面維護一個History堆疊，執行pushState函式可壓入設定的url至堆疊頂，同時修改當前指標
當執行back操作時，history堆疊大小并不會改變（history.length不變），僅僅移動當前指標的位置
詳細查看：https://www.yuque.com/along-n3gko/ezt5z9/gle5df
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96621.html
標籤：JavaScript
下一篇：js函式多載