JS從入門到放棄：做用域和閉包

時間 2019-11-07

原文原文鏈接

什麼是做用域

在任何語言中，都須要存儲一些變量，以後能夠對變量進行修改和查找。
而做用域就是一組規則，告訴你在變量是應該在什麼位置查找，什麼位置存儲，這就是做用域前端

編譯器是什麼

首先要明確的概念就是JavaScript是一種編譯型語言，但它不像是其餘編譯型語言會在執行前被編譯完成，而是邊執行邊編譯，具體來講，編譯僅僅是在執行前幾秒中完成的。
那編譯是什麼呢？簡單來講，就是將代碼轉化成引擎可使用的形態，通常會有以下三個步驟：git

分詞/詞法分析：就是將你的代碼拆分開發，比方說let a = 1;，可能會被拆分紅let、a、=、1、;這幾個部分，獲得一個token流。
解析：將上面token流根據位置和節點轉化成AST樹（Abstract Syntax Tree），也就是所謂的「抽象語法樹」。這部分在以前寫Babel的文章中提到過，有興趣的同窗能夠去看看。
代碼生成：對AST語法樹進行翻譯，也就是根據樹的內容一層層找到相應的解析後的代碼，將對應的內容轉譯出來，獲得轉譯結果。

如此即是編輯器的基本概念了，固然了，實際中編輯器的操做會複雜不少，此處爲了方便理解最大程度上簡化了編譯器的內容，理解便可，重點不在此處。數組

理解做用域

要想了解做用域，首先咱們須要瞭解三個基礎概念：引擎、編譯器和做用域。
編譯器的概念以前說過了，就是講代碼翻譯成引擎能夠識別的語句。引擎則是執行編譯後代碼的具體內容。而做用域是輔助引擎在執行代碼時如何訪問和操做對象的一種規則。
有一點須要注意的是，在不少人眼裏，編譯器和引擎的工做多是這樣的：瀏覽器

代碼：let a = 1;;
編譯器轉譯代碼，翻譯let a = 1;
引擎執行翻譯後的代碼bash

很不幸的是，這是一種錯誤的理解，編譯器和引擎是這樣工做的：閉包

代碼：let a = 1;;
編譯器轉譯代碼，翻譯let a和a = 1，由於let a的存在，編輯器會讓做用域在合適的位置來聲明a變量
引擎執行a = 1，給a變量賦值編輯器

這纔是代碼真正的執行邏輯，變量聲明和賦值是分開的，也就是引擎的執行是有基礎的，比方說咱們要拍一場電影，那麼首先咱們須要找到合適的演員，場地等等，還要準備好劇本，以後子在拍的時候演員就要開始表演了。在JS中，編輯器會幫咱們找到合適的演員，找到合適的場地，並將演員放到合適的位置上，把劇本給引擎。以後，在引擎執行，也就是電影開拍時，引擎根據劇本會給演員賦予角色內容，也就是變量的賦值操做。而引擎怎麼找到演員呢？就是經過詢問做用域，來進行演員的尋找。
雖然這樣的比喻不是很恰當，當就編譯器、引擎和做用域的理解來講，已是比較合理的，三者的分工基本上就是這樣的一種狀況。ide

LHS和RHS

剛纔說編譯器會將let a = 1;拆分紅let a;和a = 1;。實際上是將整個語句分紅了「聲明」和「賦值」量部分，在編譯器中，聲明語句被稱爲LHS（Left-hand Side），賦值語句被稱爲RHS（Right-hand Side）。其實也就是左手邊和右手邊，這樣說也不太準確，由於右手邊不只僅是有賦值操做，從某種意義上來講，右手邊意味着不是左手邊。或者能夠說RHS的意思是「取...的值」。舉個例子：函數

console.log( a );
複製代碼

這裏的a的引用就是一個RHS引用，由於沒有a沒有相關的賦值語句，因此在查詢是，a的值被傳遞到了console.log(...)。再舉個例子：ui

a = 1;
複製代碼

這裏的a引用就是一個LHS引用，由於無論a是什麼，這條語句的目標就是先找到a，以後將= 1賦值給a。總的來講，LHS和RHS並不是表明着等號兩遍的內容，而是「賦值的目標（LHS）」和「賦值的源（RHS）」。最後舉個兩者都有的例子：

const consoleA = (a) => {
    console.log(a);         // 2
};
consoleA(2);
複製代碼

上例用到的查詢就相對來講，先是是consoleA的調用，也是一個RHS查詢。有一個細節部分就是a被賦值成了2，這發生在2做爲參數傳遞給consoleA時，由於賦值的目標，因此是一個LHS查詢。還有一個就是console中包含RHS查詢，這個在上面說過。須要注意的就是a的隱形賦值，沒有明確的語句將2賦值給a，由於在調用中默默的就賦值了，這是比較容易忽視的一個點。

引發和做用域的交互

仍是上面的例子：

const consoleA = (a) => {
    console.log(a);         // 2
};
consoleA(2);
複製代碼

這裏的引擎和做用域的工做流程是這樣的：

第一次交互
引擎：詢問做用域，須要一個consoleA的RHS引用。
做用域：找到被編譯器聲明的consoleA，返回給引擎。
引擎：執行consoleA

第二次交互
引擎：在函數內部找到a參數，詢問做用域a參數的值
做用域：找到隱含賦值的2，返回給引擎
引擎：將2賦值給a

第三次交互
引擎：執行到console，須要RHS查詢console是什麼，詢問做用域
做用域：拿到內建的console，返回給引擎
引擎：執行console，並在console找到log方法，執行

第四次交互
引擎：console.log()中引用到了a，RHS查詢a，詢問做用域
做用域：查找a的值，將2返回給引擎
引擎：執行console.log(2)

...

僅僅個簡單到不能再簡單的方法啊，引擎和做用域卻有了四次交互，足以證實做用域在代碼中有多麼終於。由於做用域規範了變量的位置和值，因此一切的RHS和LHS查詢都須要交給做用域。
做用域也有本身的規範，它會由內而外的查詢，查到內容以後馬上返回，若是沒找到就會報錯了。就像俄羅斯套娃同樣，從裏面最小的套娃中開始查找，若是沒有再在大一號的娃娃中查找，如此往復，一直會查找到最外層的套娃。
也是由於做用域由內而外的查詢，LHS和RHS在查詢失敗時也會報出不一樣的錯誤。比方說下面這段代碼：

const consoleA = (a) => {
	console.log( a + b );
	b = a;
}

foo( 2 );
複製代碼

在查找b的RHS查詢天然是查詢不到，由於b根本就沒有被定義，因此會報ReferenceError的錯誤，也就是關聯錯誤。咱們對一個變量以函數的方式調用呢？比方說下面這樣：

const a = 1;
a();
複製代碼

這裏a的RHS雖然有查結果，可是a並非一個函數，而是一個變量，以函數的方式調用顯然是不能夠的，因此引擎會拋出一個TypeError錯誤，意爲類型錯誤。
因此簡單來講，ReferenceError報錯是做用域解析失敗，證實變量根本就沒有被聲明。而TypeError意味着做用域解析成功，可是調用方式錯了。

函數中的做用域

經過上面的內容咱們瞭解了什麼是做用域以及做用域的基本概念，那麼什麼能夠建立做用域呢？首當其衝的就是函數了。

function eg() {
	const a = 123;
    console.log(a);
}
eg();                       //  123
console.log(eg);            //  function eg (){<-->}
console.log(a);             //  a is not defined
複製代碼

上例中聲明瞭eg函數，裏面新建了a變量，以後輸出了a。在函數外層，調用和打印eg函數是沒有任何問題的，但打印a變量時就出現了undefined的問題，由於a是在函數eg中聲明瞭，在函數外層沒法找到，也就證實了函數確實能夠建立本身的做用域。
函數聲明做用域的特色就是能夠將函數內部的代碼「隱藏」起來，外部沒法訪問函數內部的代碼，僞裝「隱藏一下」。而在函數內部聲明變量或者函數能夠在很大程度上減小全局變量的產生，由於儘可能不使用全局變量是開發的基本原則，也就是最低權限原則。這時函數產生的做用域就能夠很好的實現這個原則，必反說有段代碼以下所示：

function bo(a) {
	b = a + ao( a * 2 );
	console.log( b * 3 );
}
function ao(a) {
	return a - 1;
}
let b = 0;
bo( 2 ); // 15
複製代碼

此處有ao和bo兩個函數，bo中調用了ao。但此處將ao暴露成全局函數是徹底沒有必要的，由於沒有別的地方調用了ao。因此徹底能夠將ao放到bo中，不只僅避免了在函數外部被無心中調用，也減小了全局變量。以下所示：

function bo(a) {
	function ao(a) {
		return a - 1;
	}
	let b = 0;
	b = a + ao( a * 2 );
	console.log( b * 3 );
}
bo( 2 ); // 15
複製代碼

將ao放到bo中就很方便了，只有在bo內部才能調用ao，避免了不少沒必要要問題的產生。

IIFE——當即被調用的函數表達式

平常生活中，咱們還會遇到一些比較尷尬的問題。有時候函數只會被調用一次，卻依然要聲明，這就十分尷尬了。聲明後不只僅污染了全局做用域，同時還須要調用才能執行，比方說下面這個例子：

const a = 2;
function ao () {
    const a = 3;
    console.log(a);     //  3
}
ao();
console.log(a);         //  2
複製代碼

從例中能夠很直觀的看到在函數內部聲明函數外部同名變量是不會有任何問題的，ao中的a不會覆蓋ao外部的a。同時的問題就是ao函數。如上所說，ao污染了全局做用域，並且還需手動調用。解決這個辦法的方法很簡單：

const a = 2;
(function ao (){
    const a = 3;
    console.log(a);     //  3
})()
console.log(a);         //  2
複製代碼

乍一看可能很差理解，其實比較簡單。首先將兩個()拆開來看，第一個()包裹了一個函數，那麼這個函數就再也不是一個函數的聲明瞭，而是成爲了函數表達式。表達式很好理解，能夠即時運行的代碼。區分函數和表達式也很簡單，主要看function是不是這行第一個東西：若是是，則爲函數聲明；若不是，則是函數表達式。
那麼第二個括號呢？就是正常函數調用後面的括號，也能夠往裏面填充參數，如果第一個括號中的函數須要參數，便可直接獲取。
如此即可直接調用函數了，簡直不要太方便。

塊級做用域

首先舉個例子：

for (var i=0; i<10; i++) {
	console.log( i );
}
複製代碼

這種for循環在ES5時代是再常見不過的了，不少前端初學者也寫過這樣的代碼。其實這段代碼有個很嚴重的弊端，就是在全局做用域中建立了i變量。若是有別的地方使用了i變量，則會致使循環失敗或者無限循環，這是一個比較嚴重的問題。爲了解決這個問題，須要使用塊級做用域來將這段代碼包裹起來，i變量則不會污染全局做用域。
在ES6中，咱們能夠完美的解決這個問題，就是使用let聲明變量。let將其聲明的變量默認綁定在當前做用域中，也就是說除了當前做用域，在別的做用域中幾乎沒法訪問let聲明的變量。也就是說上面的代碼能夠改爲這樣。

for (let i=0; i<10; i++) {
	console.log( i );
}
console.log( i ); // ReferenceError
複製代碼

此處使用let將i變量附着在了for循環中的做用域，因此在別的地方是沒法訪問i變量，打印的結果也是ReferenceError。足以證實i變量沒有污染全局做用域。
與let相似的，const也有同樣的功能，只是const聲明的變量沒法修改，沒法修改也是相對的。

const a = [];
a = [1, 2, 3];      //   Assignment to constant variable.
a.push(1);
console.log(a);     //  [1, 2, 3]
複製代碼

直接賦值瀏覽器會直接拋出一個錯誤，但能夠間接賦值，比方說使用push()方法往數組中增長一個元素，打印結果證實確實完成了修改，這涉及到了另一個問題，在後面的「入門到放棄」系列文章中詳細解釋。

提高

在不少人眼中，JS的代碼都是自上到下一行一行執行的，在不少狀況中這也確實是正確的。但注意了，這只是在不少狀況下

a = 1;
var a;
console.log(a);
複製代碼

你以爲這裏的console會打印出什麼？並非undefined，而是1。這就是上面所提到的那一小部分狀況。再舉個例子：

console.log(a);
var a = 1;
複製代碼

你以爲這裏會輸出什麼？並非ReferenceError而是undefined。這是爲何呢？實際上是文章開頭提到的編譯器的知識。
編譯器會在引擎執行以前解釋代碼，而解釋代碼中有一部分工做就是找到全部的聲明，並將其放在合適的位置上。因此在全部的代碼被執行前，全部的聲明，包括變量和函數都會被首先處理。因此上面兩個例子應該是這種運行順序：

//  例1
var a;
a = 2;
console.log( a );           //  2
//  例2
var a;
console.log( a );           //  undefined
a = 2;
複製代碼

雖然這種順序看上去很詭異，但實際上確實是這種運行邏輯，聲明被提高到最頂端，並且首先執行。須要注意的的，僅僅是函數或者變量聲明纔會被提示，以前提到的函數表達式並不會被提高。同時提高是以做用域爲單位了，每一個做用域內容的聲明也會在其內部提高。
那麼函數聲明和變量聲明有前後順序麼？有點，函數會被變量更先聲明。舉個例子：

//  代碼順序
ao(); // 1

var ao;

function ao() {
	console.log( 1 );
}

ao = function() {
	console.log( 2 );
};
---------------------
//  執行順序
function ao() {
	console.log( 1 );
}

ao(); // 1

ao = function() {
	console.log( 2 );
};
複製代碼

由於函數聲明優先於變量聲明，那麼此處理所應當輸出1，很好理解。最後須要注意的就是如有多個同名聲明，或者是重複聲明，那麼後續的聲明會覆蓋前一個。

做用域閉包

瞭解了上面的內容後，下面能夠正式開始瞭解做用域閉包了，這個看起來很難的概念在瞭解了上面的基礎知識後會變得十分清晰明瞭。

在一些語言中，在函數中能夠（嵌套）定義另外一個函數時，若是內部的函數引用了外部的函數的變量，則可能產生閉包。閉包能夠用來在一個函數與一組「私有」變量之間建立關聯關係。在給定函數被屢次調用的過程當中，這些私有變量可以保持其持久性。

閉包的官方解釋可能不是很好理解，其實用通俗的語言來講，就是一個函數能夠記住其在建立時的做用域，而且能夠在其做用域外部執行。舉個例子：

function ao() {
	var a = 2;

	function bo() {
		console.log( a );
	}

	return bo;
}

var co = ao();

co(); // 2  閉包
複製代碼

此處的co就是一個閉包。其自己的做用域是函數ao內容，但咱們卻在全局做用域調用了co函數，co函數中又調用了bo函數，此時的bo已經脫離其本來ao的做用域了，轉而在全局做用域中被調用。bo依然擁有對那個做用域的引用，而這個引用稱爲閉包。
固然了，函數也能夠做爲參數傳遞給另一個函數，並且在這種傳遞是間接時也能夠。

var do;

function ao() {
	var a = 2;

	function bo() {
		console.log( a );
	}

	do = bo; // 將`bo`賦值給一個全局變量
}

function co() {
	do(); // 閉包
}

ao();

co(); // 2
複製代碼

代碼比較複雜，共有三個函數和一個變量。函數爲：ao、bo和co。do是個變量。在ao函數中包含了bo函數，而且將bo函數賦值給全局變量do。在co函數中調用了全局變量do。在函數聲明完成後，首先調用ao函數，聲明bo函數，而且賦值給do變量。最後調用co方法，便是閉包。
也就是在調用co時會調用do函數變量，而do又是ao中的bo，而bo的做用域在ao內部，被調用時卻在全局做用域，由於co執行時調用了ao做用域中的變量，這中引用也就構成了閉包。
還記得以前提到的IIFE麼？其實從嚴格意義上來講，這並非個閉包，由於函數並無在其做用域外止息，它仍然在被聲明的做用域中被調用。
最後舉個最經典的例子：

for (var i=1; i<=5; i++) {
	setTimeout( function timer(){
		console.log( i );
	}, i*1000 );
}
複製代碼

相信不少前端開發者都看過這個問題，但可能對其原理不是很理解。首先說說結果，上面的代碼並不會像咱們預想中那樣以1秒爲間隔依次打印：1，2，3，4，5。而是會以一秒爲間隔打印6次5。這怕不是石樂志，徹底使人沒法理解。
首先來講說6次是從何而來，在i爲5時，知足了i<=5的條件，因此依然會有下一次循環，也就是i爲6時纔會終止循環，因此會有6次打印。那麼爲何一直都是5呢？這由於5是i在循環結束後的最終值，雖然在i爲6時依然循環到了，但由於不符合條件，i沒有被執行++操做，因此是上次循環的5。
那麼如今的問題就是爲何會出現這種狀況？到底缺乏了什麼才致使了這種狀況的發生？
其實歸根結底仍是做用域的問題，代碼的本意是在循環每次迭代時都會獲取到迭代的值，而且傳遞給setTimeout函數，但實際上並無發生這種事，由於i的做用域被放在了全局做用域上，至關於每次迭代的值都會被下一次迭代的值覆蓋，因此最後只能獲得最後的i值，也就是5。想解決這個問題，只有在每次迭代時都給它一個做用域，讓其i值停留在迭代時的狀態。想要這麼作，首先可使用以前提到過的IIFE方法。

for (var i=1; i<=5; i++) {
	(function(i){
		setTimeout( function timer(){
			console.log(i);
		}, i*1000 );
	})(i);
}
console.log(i)      // 5
複製代碼

在IIFE中，括號內部的內容有着本身的做用域，此時將i做爲參數傳遞進去，IIFE內部的做用域便可獲取固定的i值，不會隨着全局做用域中i值的變化而變化。固然了，全局做用域中的i獲得的仍是i最後迭代的值，但這並不影響IIFE中i的值，由於在做用域內部聲明的同名變量會直接遮擋外部做用域，這一點以前也提到過。
那麼有沒有別的辦法來解決這種問題呢？幸運的是，ES6提供了一種更簡單的方法——let。上文中提到過，每次使用let時，都會劫持一個做用域，而且在其中聲明一個變量。那麼上面的代碼就能夠變成下面的樣子：

for (let i=1; i<=5; i++) {
	setTimeout( function timer(){
		console.log( i );
	}, i*1000 );
}
複製代碼

方便快捷，不留遺憾。使用let後，i的值不會被重複的聲明而覆蓋，每次迭代的i都會被綁定在當前迭代的做用域上，因而當前迭代中的setTimeout便可獲取到當前迭代中的i值，而不是全局變量的i。
上面的問題就是利用塊級做用域和閉包聯手解決的，固然了，這樣的例子還有不少不少，更多的會出如今平常的工做者，熟練使用這二者能夠再很大程度上讓咱們的開發更加順利。

模塊

閉包的使用中很重要的一部分就是模塊，不只僅是由於模塊在平常的工做中十分重要，跟多的是模塊對閉包的使用十分到位與完全。

function GoodModule() {
	const something = "ok";
	const somethingElse = [1, 2, 3];

	function somethingFuc() {
		console.log( something );
	}

	function somethingElseFuc() {
		console.log( somethingElse.join( "-" ) );
	}

	return {
		somethingFuc,
		somethingElseFuc,
	};
}

const ao = GoodModule();

ao.somethingFuc(); // ok
ao.somethingElseFuc(); // 1-2-3
複製代碼

上例是一個簡單模塊例子，因爲GoodModule只是一個函數，因此它須要被調用以後才能產生本身的做用域和閉包。做用域必須在函數調用時纔會被建立，而閉包是當前函數在當前做用域外部被調用時同時能夠訪問原生做用域時產生的。上例中的somethingFuc和somethingElseFuc函數的做用域都是在GoodModule函數中，而調用倒是在全局做用域中，這時閉包的做用就徹底展現了出來，不管在何處調用，somethingFuc和somethingElseFuc函數都會訪問GoodModule內部定義的變量。
固然了，在ES6中， JS提供了新的導入模塊的方法——import和module。
ao.js

const hello = (name) => {
    console.oog(`hello ${name}!`);
}
export { hello };
複製代碼

bo.js

import hello from 'ao';

const words = 'welcome';
const world = (name) => {
    hello();
    console.log(words);
}
export { world };
複製代碼

其餘文件

import ao from 'ao';
import bo from 'bo';

ao.hello('red');        //  hello rex!
bo.world();             //  hello rex!  /n  welcome
複製代碼

這種模塊的方法脫離了曾經的AMD和CMD等等引入方法，統一的規則帶來了更加規整的配飾，代碼風格也更趨近於統一，開發更加方便。

小結

本文從最開始的引擎、編譯器和做用域的解釋，介紹了三者的關係，同時瞭解了LHS和RHS查詢的關係。這對後期瞭解做用域與閉包的關係提供了必要的信息，以後對做用域進行詳細的解釋，最後結合做用域講解了閉包和二者聯動的操做，從JS原理上開始一步步增長對閉包和做用域的理解，記憶也會更加深入。

文章較長，看了這麼久，辛苦了，若有問題歡迎討論！

1. 閉包 Python從入門到放棄
2. D3.js從入門到「放棄」指南
3. Kettle從入門到放棄
4. Swift從入門到放棄
5. 從入門到放棄
6. Openstack從入門到放棄
7. Lombok從入門到放棄
8. HTTP從入門到放棄
9. ElasticSearch從入門到放棄
10. Maven從入門到放棄
更多相關文章...
• Scala 閉包 - Scala教程
• Swift 閉包 - Swift 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。