JS从入门到放弃：做用域和闭包

什么是做用域

在任何语言中，都须要存储一些变量，以后能够对变量进行修改和查找。
而做用域就是一组规则，告诉你在变量是应该在什么位置查找，什么位置存储，这就是做用域

编译器是什么

首先要明确的概念就是JavaScript是一种编译型语言，但它不像是其余编译型语言会在执行前被编译完成，而是边执行边编译，具体来讲，编译仅仅是在执行前几秒中完成的。
那编译是什么呢？简单来讲，就是将代码转化成引擎可使用的形态，通常会有以下三个步骤：

1. 分词/词法分析：就是将你的代码拆分开发，比方说let a = 1;，可能会被拆分红let、a、=、1、;这几个部分，获得一个token流。
2. 解析：将上面token流根据位置和节点转化成AST树（Abstract Syntax Tree），也就是所谓的“抽象语法树”。这部分在以前写Babel的文章中提到过，有兴趣的同窗能够去看看。
3. 代码生成：对AST语法树进行翻译，也就是根据树的内容一层层找到相应的解析后的代码，将对应的内容转译出来，获得转译结果。

如此即是编辑器的基本概念了，固然了，实际中编辑器的操做会复杂不少，此处为了方便理解最大程度上简化了编译器的内容，理解便可，重点不在此处。

理解做用域

要想了解做用域，首先咱们须要了解三个基础概念：引擎、编译器和做用域。
编译器的概念以前说过了，就是讲代码翻译成引擎能够识别的语句。引擎则是执行编译后代码的具体内容。而做用域是辅助引擎在执行代码时如何访问和操做对象的一种规则。
有一点须要注意的是，在不少人眼里，编译器和引擎的工做多是这样的：

代码：let a = 1;;
编译器转译代码，翻译let a = 1;
引擎执行翻译后的代码

很不幸的是，这是一种错误的理解，编译器和引擎是这样工做的：

代码：let a = 1;;
编译器转译代码，翻译let a和a = 1，由于let a的存在，编辑器会让做用域在合适的位置来声明a变量
引擎执行a = 1，给a变量赋值

这才是代码真正的执行逻辑，变量声明和赋值是分开的，也就是引擎的执行是有基础的，比方说咱们要拍一场电影，那么首先咱们须要找到合适的演员，场地等等，还要准备好剧本，以后子在拍的时候演员就要开始表演了。在JS中，编辑器会帮咱们找到合适的演员，找到合适的场地，并将演员放到合适的位置上，把剧本给引擎。以后，在引擎执行，也就是电影开拍时，引擎根据剧本会给演员赋予角色内容，也就是变量的赋值操做。而引擎怎么找到演员呢？就是经过询问做用域，来进行演员的寻找。
虽然这样的比喻不是很恰当，当就编译器、引擎和做用域的理解来讲，已是比较合理的，三者的分工基本上就是这样的一种状况。

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(...)。 再举个例子：

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原理上开始一步步增长对闭包和做用域的理解，记忆也会更加深入。

文章较长，看了这么久，辛苦了，若有问题欢迎讨论！