前端進階（第一期）-調用堆棧筆記

原文地址：

1-1 理解 Javascript 執行上下文和執行棧

1-2 JavaScript深刻之執行上下文棧

1-3 內存空間詳細圖解

1-4 JavaScript深刻之帶你走進內存機制

1-5 JavaScript深刻之4類常見內存泄漏及如何避免

1-1 理解 Javascript 執行上下文和執行棧

原文地址

知識點有：

1. JavaScript程序的內部執行機制；
2. 理解執行上下文和執行棧；

理解以上知識點有助於理解JavaScript的提高機制、做用域和閉包

執行上下文

執行上下文就是當前JavaScript代碼被解析和執行時所在環境的抽象概念,JavaScript 中運行任何的代碼都是在執行上下文中運行。

• 全局執行上下文
• 函數執行上下文
• Eval函數執行上下文

執行棧

執行上下文是如何建立的

分兩階段建立

1. 建立階段
2. 執行階段

總結

• 理解了執行上下文的定義及執行棧
• 對執行上下文的建立依然一頭霧水

1-2 JavaScript深刻之執行上下文棧

原文地址

知識點有：

1. JavaScript 代碼執行順序(變量提高，函數提高)
2. 使用push、pop僞代碼解釋代碼執行順序

執行順序

JavaScript 引擎並不是一行一行地分析和執行程序，而是一段一段地分析執行。

1-3 內存空間詳細圖解

原文地址

知識點有：

1. 變量對象與堆內存
2. 堆(heap)，棧(stack)與隊列(queue)三種數據結構
3. 值類型數據和引用數據類型的複製
4. 內存空間管理

變量對象與堆內存圖解

var a = 20;
var b = 'abc';
var c = true;
var d = { m: 20 }
複製代碼

值類型數據和引用數據類型的複製

• 值類型數據是值的複製，開闢新的存儲空間來存儲值，複製先後的數據之間無聯繫。
• 引用類型數據僅僅是地址的複製，開闢新的存儲空間來存儲地址指針，複製先後的地址指針指向堆中同一個值。

內存空間管理

在JavaScript中，最經常使用的是經過標記清除的算法來找到哪些對象是再也不繼續使用的，a=null是一個釋放引用的操做，脫離執行環境，這個值會在下一次垃圾收集器執行操做時被找到並釋放。

1-4 JavaScript深刻之帶你走進內存機制

原文地址

JavaScript的內存管理機制是:內存基元在變量（對象，字符串等等）建立時分配，而後在他們再也不被使用時「自動」釋放。後者被稱爲垃圾回收。

知識點有：

1. 內存模型
2. 內存的生命週期
3. 內存回收算法
4. 內存泄漏

內存模型

JS內存空間分爲棧(stack)、堆(heap)、池(通常也會歸類爲棧中)。 其中棧存放變量，堆存放複雜對象，池存放常量。

內存的生命週期

內存分配 --- 內存使用 --- 內存回收

內存回收算法

• 引用計數算法

存在一個致命的問題：循環引用。若是兩個對象相互引用，儘管他們已再也不使用，垃圾回收器不會進行回收，致使內存泄露。

• 標記清除算法

標記清除算法將「再也不使用的對象」定義爲「沒法達到的對象」。從根部（在JS中就是全局對象）出發定時掃描內存中的對象，凡是能從根部到達的對象，都是還須要使用的。那些沒法由根部出發觸及到的對象被標記爲再也不使用，稍後進行回收。

內存泄漏

• 內存泄漏的識別方法

1. 瀏覽器方法
2. 命令行方法
3. WeakMap（ES6）

1-5 JavaScript深刻之4類常見內存泄漏及如何避免

原文地址

知識點有：

1. 三種常見 JavaScript 內存泄漏
2. 閉包
3. Chrome 內存剖析工具

四種常見 JavaScript 內存泄漏

• 意外的全局變量

在 JavaScript 文件頭部加上 'use strict'，能夠避免此類錯誤發生。啓用嚴格模式解析 JavaScript ，避免意外的全局變量。

• 被遺忘的計時器或回調函數
• 脫離 DOM 的引用
• 閉包

本質上，閉包的鏈表已經建立，每個閉包做用域攜帶一個指向大數組的間接的引用，形成嚴重的內存泄漏。

Chrome 內存剖析工具

1. Timeline
2. Profiles