真正的認識閉包

時間 2019-12-06

標籤真正認識閉包简体版

原文原文鏈接

文體兩開花，說道閉包就必需要說下做用域；說道做用域我就想到了做用域鏈，說道做用域鏈，我就想到了執行期上下文，說道執行期上下文，我就想到了預編譯。因此爲了說下閉包，就得從預編譯提及。（第二次寫文章，文筆不怎麼好，加上內容自己難度挺大，請多多包涵，仔細閱讀，看懂每個字，理解圖片中的每個字）

一：預編譯

衆所周知js兩大特色 1.單線程；2.解釋執行（解釋一行，執行一行）。那麼問題來了以下代碼的輸入結果是什麼？
javascript

console.log(a,b)
function a(){}
var b = 0;複製代碼

解釋一行執行一行，第一句直接console.log（a,b），尚未執行到他們的聲明語句，那結果會不會是 xxx is not defient 。明顯不是，稍微有點基礎的人都知道 var 和函數聲明會有提高。這個提高爲 函數聲明總體提高 ，變量 聲明提高。這個提高的過程就是發生在預編譯。可是預編譯不止這些。
前端

先介紹一波知識點：java

js運行三部曲：

語法分析
預編譯
解釋執行

對函數：預編譯發生在函數執行前一刻；node

對整js ：預編譯發生在全局執行的前一刻；es6

那麼問題來了：函數聲明和變量聲明都提高誰的優先級高呢？面試

看碼：bash

function fn(a) { 
   console.log(a)    
   console.log(b)    
   var a = 123;    
   console.log(a)    
   function a(){}    
   var b = function(){}    
   console.log(b)    
   function d (){} 
} 
fn(1)複製代碼

上面的代碼分別輸出什麼，能夠本身先看看有了答案，再往下看。閉包

在回答上面的問題前先列出函數預編譯4步曲：函數

建立AO對象
找到形參和變量聲明，將變量和形參做爲AO屬性名，屬性值爲undefined
找到實參的值，賦值給形參
函數體裏面找到函數聲明，值爲函數體

全局的預編譯，省略 2.的找形參和 3步的實參和形參統一；
ui

如今來回答上面的問題：

fn(1) 執行，傳遞形參爲1；

在fn執行的前一刻發生了預編譯，生成了AO對象（Actived Object ）能夠理解爲執行期上下文

第一步：建立AO對象

AO={

}

第二步：找形參和變量聲明，將變量和形參名做爲AO屬性名，值爲undefined

注意： var b = function(){} 這個叫作函數表達式，不是函數聲明

AO={

a:undefined;

b:fundefined;

}

第三步：將實參的值賦值給形參

AO={

a:1;

b:fundefined;

}

第四步.函數體裏面找到函數聲明，值爲函數體

AO={

a:1;

b:undefined;

d:functioin d(){}

}

而後就按照代碼裏面的解釋執行便可，結果分別爲

1 , undefined ,123 , function(){} .

對於全局的就分析第一個列出的代碼了。

第一步：建立GO對象（global object）

GO = {

}

第二步：找到變量聲明

GO = {

b:undefined

}

第三步：找到全局的函數聲明

GO = {

b:undefined,

a :funciton a () {}

}

下面給出2個題，而後結束預編譯。（你們能夠先本身坐下，再去本身打下代碼，若是跟本身的答案個控制檯輸出有出入，就看再看看4部曲再作作。熟悉了再往下看喲）

console.log(test);
function test(test) {    
   console.log(test)    
   var test = 234;    
   console.log(test)    
   function test(){} 
} 
test(1) 
var test = 123;複製代碼

function test (a,b){   
    console.log(a);   
    c = 0;   
    a = 3;   
    b = 2;   
    console.log(b);   
    function b(){}   
    function d(){}   
    console.log(b)
}
test(1);複製代碼

二：做用域，做用域鏈

講做用域前先給出一些定義：

做用域定義: 變量（變量做用域又稱爲上下文）就是變量生效(能被訪問)的區域

做用域目前被分爲：全局做用域，函數做用域，塊級做用域（es6引入，先不作討論）

[[scopes]] : 每一個JavaScript 函數都是一個對象，對象中有些屬性咱們能夠訪問到（如：test.name）,可是有些是不能夠的，這些屬性僅供JavaScript引擎存取，[[scopes]]就是其中一個。如同，這個是 Object() 的內部屬性

做用域鏈：[[scope]]中所存儲的執行期上下文對象的集合，這個集合呈鏈式連接，咱們把這種鏈式連接叫作做用域鏈

運行期上下文：當函數執行時，會建立一個稱爲執行期上下文的內部對象。一個執行期上下文定義了一個函數執行時的環境，函數每次執行時對應的執行上下文都是獨一無二的，因此屢次調用一個函數會致使建立多個執行上下文， 當函數執行完畢，執行上下文被銷燬

來看碼：

function a() {    
    function b(){       
        var b = 234;    
    }    
    var a = 123;    
    b();
}
var glob = 100;
a();複製代碼

當代碼執行到 a() 執行前是

第一步: a 定義，全局生成了一個 GO ，a也是其中的一個屬性，a 的[[scope]] 0位指向GO

第二步：a執行，生成了本身的AO，插入到了[[scopes]] 0 位GO 日後延

第三步：a執行引發的b的定義，這個時候b繼承了a的勞動成果，直接把a的生成的做用域鏈的引用拿來掛到本身的身上。這個時候 b.scope[0] 指向的AO和 a.scope[0] 指向的AO是同一個。（結合一下本身寫代碼就能知道，在子函數裏面改變了外部函數的值，外部函數的值也改變了）

第四步：b函數執行，生成了本身的AO，把本身的AO插入到剛剛獲取的做用域鏈

看完這個再去看看剛剛的文字的定義。

弄懂以後就明白了，爲何子函數能拿到父級函數的變量，而父級函數拿不到子函數內的變量。由於子函數的做用域鏈裏面存儲了父級函數的變量，而父級函數的做用域鏈並無子函數的變量。當在函數內部使用 a + b 的時候，系統會沿着做用域鏈去查找，本身有就用本身的，本身沒有就去找父級的，直到找到最底端。若是仍是沒有， 變量賦值就暗示全局變量， 變量取值就報錯， xx is not defined。

再舉一個例子，加深理解

function a (){   
    function b(){      
        function c(){                          
        }        
        c();   
    }   
    b(); 
} 
a();複製代碼

上的碼

a defined a.[[scope]] -- > 0:GO

a doing a.[[scope]] -- > 0:aAO

1:GO

b defined b.[[scope]] --> 0:aAO

1:GO

b doing b.[[scope]] --> 0:bAO

1:aAO

2:GO

c defined c.[[scope]] --> 0:bAO

1:aAO

2:GO

c doing c.[[scope]] --> 0:cAO

1:bAO

2:aAO

3:GO

看了這個例子，你們應該能明白點了，（如何還沒明白，怪我，第二次寫文章，表達很差）上面全部的AO和BO 都是一個AO和BO，他們拿到地址指向後就能夠直接用，一個修改所有都被修改。

三：文體兩開花，終於到了閉包

定義： 當內部函數被保存到外部，將會生成閉包。閉包會致使原有做用域鏈不釋放，形成內存泄漏。

討論以前，先說一句話，一句開始我加粗了的話：當函數執行完畢，執行上下文被銷燬

看碼；

function a () {   
    function b() {      
        var bbb = 234;      
    console.log(aaa)   
    }   
    var aaa = 123;  
 return b;
}
var glob = 100;
var demo = a();
demo();複製代碼

來按照上面的做用域分析再來一波：

a defined a.[[scope]] -- > 0:GO

a doing a.[[scope]] -- > 0:aAO

1:GO

b defined b.[[scope]] --> 0:aAO

1:GO

a執行引發b的定義，b定義的時候直接繼承a的勞動成果，把 a的做用域鏈所有加持到本身身上。當執行return b ；的時候， b函數帶着他身上的做用域鏈一塊兒被返回了出去，而後a執行結束，這個時候 a.[[scope]] [0] 指向的 aAO，就會被銷燬，就至關因而把a.[[scope]] [0] 鏈接的 aAO的那根線給剪短了。可是整個b函數所有返回出去賦值給了demo， demo就變成了函數，demo的做用域鏈就是b函數的做用域鏈，而b的做用域鏈又是繼承的 a函數的做用域鏈， 裏面包含了全部在a函數裏面定義的變量 。因此demo 函數就能夠對本身的做用域鏈裏面的值隨心所欲。並且當a再次執行的時候，他建立的是一個新的AO對象，他也管不了上一次建立的變量。因此 demo函數的做用域裏面的變量就成爲了demo的私有變量，除了他本身，誰用調用不了。

這就是一個閉包造成的真正過程。