弁言

收集上關於作用域及閉包的文章許多，自身關於純理論學問並不能很快的明白，但自身關於圖畫有很強的影象和明白能力，因而決議將此學問點以圖畫的學問表現出來，加深自身明白的同時假如能幫到正在進修的童鞋就再好不過了

下面我以函數的全部生命周期來訴說此部份學問

函數生命周期

先寫一下示例代碼

var a = 10;
function func(a) {
  var a = 20;
  a++;
  console.log(a);
}
func();
console.log(a);

最先實行順序前

1. 先建立 ECS，ECS 實在就是特地保留正在挪用的函數的實行環境的數組，也可以說對象，實在關聯數組也就相當於對象。
2. 然後在 ECS 中增加瀏覽器主順序的實行環境 main
3. 建立全局作用域對象 window
4. main 實行環境援用 window

定義函數時

1. 原始範例的全局變量會直接存入 window 環境當中，由於函數是援用範例，所以首先用函數名聲明全局變量
2. 然後建立函數對象，封裝函數定義
3. 函數對象的 scope 屬性，指回函數建立時的作用域，意義是，函數實行時假如函數自身供應的變量不能讓函數實行完整，那它便會去回它建立時的誰人作用域去尋覓變量。
4. 函數名背面存入指向函數對象的地點

援用範例在个中只能存儲地點，這個在此筆記談談值通報中有細緻申明

函數挪用時

1. 向 ECS 中壓入本次函數挪用的實行環境元素
2. 建立本次函數挪用時運用的函數作用域對象（AO），也就是暫時作用域
3. 在 AO 中建立貯存一切的局部變量，包括形參變量和函數內用 var 聲明的變量
4. 設置 AO 的 parent 屬性和援用函數的 scope 屬性指向父級作用域對象
5. 函數的實行環境援用 AO
6. 順着誰人箭頭，先在 AO 中找變量，也就是局部變量，假如 AO 中沒有，再順着箭頭去父級作用域中找

函數挪用后

函數的實行環境出棧，AO 開釋，AO 中的局部變量一同被開釋掉。

我們得知全部效果以後，自然而然那兩個 console 的效果也明顯看法。

閉包

前面我們提到過，全局變量是可重用然則污染全局，局部變量不會污染全局然則不可重用。

我自身以為閉包就是重用變量又庇護變量不被污染的機制，就是為了處理這一狀況而生的。

特性

包裹受庇護的變量和操縱變量的內層函數的外層函數

外層函數要返回內層函數的對象

• return function(){..}
• 直接給全局變量賦值一個內部 function
• 將內部函數保留在一個對象的屬性或數組元素中 return [function function function] 或 return {fun:function(){...}}

挪用外層函數，用外部變量接住返回的內層函數對象,構成閉包。

道理

先貼出示例代碼

function outer() {
  var num = 1;
  return function() {
    console.log(num++);
  };
}

var getNum = outer();
getNum();
getNum();
num = 1;
getNum();

下面我把閉包構成的道理用繪圖東西畫出來

window 中存入 outer 名並指向 outer 函數對象，getNum 由於聲明提早也先將變量名存在 window 中。

getNum = outer() 實在包括 outer 的建立和 getNum 的賦值。

上面的圖畫的是 outer 函數舉行到 var num = 1; ,前面都有說過，不過多反覆。

建立了匿名函數，getNum 指向了匿名函數對象，匿名對象的 scope 指向它的父級作用域，也就是 outer 的作用域，那如許就構成了圖中的三角關聯，此時 outer 實行終了，脫離 ECS 實行環境，outer 的 AO 本也應當跟着脫離，然則由於這壯大的三角關聯，強行拉住不讓其開釋，也就構成了所謂的閉包。

那實在閉包的緣由就是:外層函數的作用域對象沒法開釋

getNum=outer()getNum 實在就是一個函數

挪用getNum(),會天生 getNum 的暫時作用域,圖中可看出,getNum 實在就是在 outer 中的匿名函數，所以他的 parent 就指向 outer 留下的作用域。當他實行 console.log(num++) 的時刻，在他的作用域中沒有 num 變量他就會順着作用域鏈去尋覓，終究在 outer 中的作用域中找到 num 並對其舉行自加操縱。所以當下次挪用 getNum 的時刻 num 會從 2 最先，不會是一最先的 1。

num 不是全局變量，還完成了 num 變量的反覆挪用。就達到了閉包的目標。

設置 num = 1 只是在 window 對象上增加存儲 num 的值，當下次挪用 getNum 的時刻 js 引擎還會從 getNum 作用域最先順着作用域鏈尋覓 num,在 outerAO 就會尋覓到 num,所以基礎不會影響到 window 中的 num,也不會受其影響。因而此段代碼輸出的效果為 1 2 3。

瑕玷

固然閉包也有其瑕玷

• 比一般函數佔用更多內存，由於外層函數的作用域對象（AO）一直存在
• 輕易形成內存走漏

處理辦法

將援用內存函數對象的外部變量重置為 null

getNum = null;

getNum 指向 outer 函數對象的那根線就會斷掉，三角關聯碎裂，那函數對象和 outerAO 也會接踵被燒毀。

以為文章不錯的話還請列位大佬給個 star 勉勵一下 gayhub