《前端之路》之四 JavaScript 的閉包、做用域、做用域鏈

04：JavaScript 的閉包

1、定義：

常規定義：

閉包的定義： 有權利訪問外部函數做用域的函數。

通俗定義：

一、函數內部包含了函數。而後內部函數能夠訪問外部函數的做用域。
二、內部函數能夠訪問 父級函數的做用域。
...等等等

2、思考：

一、咱們在平常的開發過程當中會應用到 閉包麼？
二、若是有遇到的話，會是在什麼狀況下遇到的？
三、舉一些 具體的例子。

一、咱們在平常的開發過程當中會應用到 閉包麼？

以以前的知識對於 閉包的理解來說是這樣的

(function(){
        for(var i=0; i<10; i++) {
            console.log(i)
        }
    })()

或者說是這樣的

var fnX = function() {
        var x = 123
        function y() {
            alert(x)
        }
        y()
    }

    fnX()   // 123

總結下以前的理解就是： 內部函數能訪問外部函數做用域，可以保存變量不被銷燬而一直存在。

3、做用：

在JavaScript中有做用域和執行環境的問題，在函數內部的變量在函數外部是沒法訪問的，在函數內部卻能夠獲得全局變量。因爲種種緣由，咱們有時候須要獲得函數內部的變量，但是用常規方法是得不到的，這時咱們就能夠建立一個閉包，用來在外部訪問這個變量。

經過將一個方法或者屬性聲明爲私用的，可讓對象的實現細節對其餘對象保密以下降對象之間的耦合程度，能夠保持數據的完整性並對其修改方式加以約束，這樣能夠是代碼更可靠，更易於調試。封裝是面向對象的設計的基石。

3.1 什麼是做用域

3.1.1 ES5的做用域問題

在 ES5 中 咱們經常會說的一個概念是 局部變量 和 全局變量

那麼 局部變量 和 全局變量 所這個 局部 和 全局則爲 做用域。

這個概念其實介紹起來仍是比較多虛無。 可是我記得有一本書 叫 《你不知道的JS》

在這本書的 上冊 做者詳細的介紹了 做用域 這個概念。

做用域是什麼

　　1.現代JavaScript已經再也不是解釋執行的，而是編譯執行的。可是與傳統的編譯語言不一樣，它不是提早編譯，編譯結果不能進行移植。編譯過程當中，一樣會通過分詞／詞法分析,解析／語法分析,代碼生成三個階段。

　　2.以var a = 2;語句爲例，對這一程序語句對處理，須要通過引擎,編譯器,做用域三者的配合。其中，引擎從頭至尾負責整個javascript程序的編譯和執行過程；編譯器負責語法分析和代碼生成；做用域負責收集並維護由全部聲明的標識符組成的系列查詢，並實施一套規則，肯定當前執行的代碼對這些標識符的訪問權限。

　　3.對於var a = 2;編譯器首先查找做用域中是否已經有該名稱的變量，而後引擎中執行編譯器生成的代碼時，會首先查找做用域。若是找到就執行賦值操做，不然就拋出異常

　　4.引擎對變量的查找有兩種：LHS查詢和RHS查詢。當變量出現中賦值操做左側時是LHS查詢，出現中右側是RHS查詢

詞法做用域

1.詞法做用域就是定義在詞法階段的做用域。詞法做用域是由你在寫代碼時將變量和塊做用域寫在哪裏決定的，詞法處理器分析代碼時會保持做用域不變

2.做用域查找會在找到第一個匹配的標識符時中止

3.eval和with能夠欺騙詞法做用域，不推薦使用

函數做用域和塊做用域

1.JavaScript具備基於函數的做用域，屬於這個函數的變量均可以在整個函數的範圍內使用及複用
2.(function fun(){})() 函數表達式和函數聲明的區別是看function關鍵字出如今聲明中的位置。若是function是聲明中的第一個詞，那麼就是一個函數聲明，不然就是一個函數表達式

3.with,try/catch具備塊做用域，方便好用的實現塊級做用域的是es6帶來的let關鍵字

提高

1. 變量的提高
    2. 函數提高  （這裏就不過多的贅述了）

動態做用域

　　1.詞法做用域是一套引擎如何尋找變量以及會在何處找到變量的規則。詞法做用域最重要的特徵是它的定義過程發生中代碼的書寫階段

　　2.動態做用域讓做用域做爲一個在運行時就被動態肯定的形式，而不是在寫代碼時進行靜態肯定的形式。eg:

function foo(){ 
    console.log(a);  // 2 
} 
function bar(){ 
    var a = 3; 
    foo(); 
} 
var a = 2; 
bar();

詞法做用域讓foo()中的a經過RHS引用到了全局做用域中的a，因此輸出2；動態做用域不關心函數和做用域如何聲明以及在何處聲明，只關心從何處調用。換言之，做用域鏈是基於調用棧的，而不是代碼中的做用域嵌套。若是以動態做用域來看，上面代碼中執行時會輸出3


　　3.JavaScript不具有動態做用域，可是this機制中某種程度上很像動態做用域，this關注函數如何調用。

3.1.2 ES6的做用域問題

在 ES6 中 出現了塊級做用域的概念

let const 在（） 內則 （）內的做用域 爲 塊級做用域。

3.2 什麼是執行環境

執行環境 即爲 當前做用域內的環境。

3.3 什麼是做用域鏈

這個概念其實 也是比較虛的概念，不太好理解。可是一旦理解就不會忘記了。

所謂 鏈 其實就是鏈條， 將須要連接在一塊兒的東西連接在一塊兒（感受說了一句廢話）

做用域鏈的通俗理解：

在函數內部做用域 經過 做用域鏈 能夠訪問 函數外部做用域 的屬性或者方法。

一層層的 做用域鏈 往外走  到最後 則爲 window 對象的全局做用域。

而後這一條條的 做用域鏈 就造成了一整條關聯的鏈條。

4、具體案例的分析:

這裏 咱們舉了一個栗子 🌰

eg1:

function Person(name) {
    this.name = name
    this.getName = function() {
        return this.name
    }
}

var one = new Person('zhang')
one.getName() // zhang
one.name      // zhang

var two = new Person('wang')
two.getName() // wang
one.name      // wang

eg2:

function Person(name) {
    var _name = name
    this.getName = function() {
        return _name
    }
} 

var one = new Person('zhang')
one.getName() // zhang

var two = new Person('wang')
two.getName() // wang

eg1 vs eg2

這二個例子進行對比，雖然 都拿到了本身想要的 name 可是 eg1 的方式會比 eg2 獲取 name 
的方式要多一個， 即爲 做爲對象的屬性來 獲取到 當前的 name （one.name）

那若是 你想讓你的 name 屬性只能經過 getName 方法來獲取，不但願有別的方法來獲取 甚至是改變的話，那麼 閉包 設置私有屬性就是一個很安全的作法，那麼這個時候閉包的做用就體現出來了。

Github地址，歡迎 Star