深刻理解闭包以前置知识→做用域与词法做用域

前言

这两天恰好和朋友讨论到闭包，这个JavaScript中的“神兽”，不少同窗会以为闭包这玩意太闹心了，怎么着都理解不了...其实刚接触JavaScript的时候我也是这样的。

可是呢，闭包却很是重要！很是重要！很是重要！ 在《你不知道的JavaScript》中甚至这样写道“对于那些有一点 JavaScript 使用经验但从未真正理解闭包概念的人来讲，理解闭包能够看做是某种意义上的重生”。

因此看到这里，各位亲是否是迫切的想要深刻的去了解一下闭包了呢？ 不急，不急，对于真正的理解闭包有一个很是重要的前置知识，那就是做用域与词法做用域，若是你没能好好理解词法做用域，那么闭包是确定理解不了的！那么接下来就好好的理解一下词法做用域吧。

做用域

咱们先抛出一个概念：“词法做用域是做用域的一种工做模型”，先无论这句话的深层次的意思，就但看表面，咱们就应该能够得出一个结论，那就是没有做用域的概念就没有词法做用域的概念。因此...接下来，你懂的...

什么是做用域

一言以蔽之，“做用域就是一套规则，用于肯定在何处以及如何查找变量（标识符）的规则”。在这句话中读到一个关键点 查找变量（标识符），那么就从查找变量提及吧。

先看一段及其简单的代码

function foo() {
	var a = 'iceman';
	console.log(a); // 输出"iceman"
}
foo();
复制代码

在foo函数执行的时候，输出一个a变量，那么这个a变量是哪里来的嘞，有看到函数第一行有定义a变量的代码var a = 'iceman'。

再看一段一样简单的代码

var b = 'programmer';
function foo() {
	console.log(b); // 输出"programmer"
}
foo();
复制代码

一样的道理，在输出b的时候，本身函数内部没有找到变量b，那么就在外层的全局中查找，找到了就中止查找并输出了。

注意以上两段代码都有查找变量，第一段代码是在函数中找到a变量，第二段代码是在全局中找到b变量。如今闭上眼睛，我要给加粗的这两个词的后面加上几个字了！

好了，打开眼睛，Duang，Duang --->函数做用域、全局做用域，把这两个词换入到原来那句话中，第一段代码是在函数做用域中找到a变量，第二段代码是在全局做用域中找到b变量。

因此，懂了没有呢？通俗的讲，做用域就是查找变量的地方。在某函数中找到该变量，就能够说在该函数做用域中找到了该变量；在全局中找到该变量，就能够说在全局做用域中找到了该变量！

不知道各位同窗有没注意到一个细节，咱们在查找b变量的时候，先在函数做用域中查找，没有找到，再去全局做用域中查找，有一个往外层查找的过程。咱们好像是顺着一条链条从下往上查找变量，这条链条，咱们就称之为做用域链。

做用域嵌套

在尚未接触到ES6的let、const以前，只有函数做用域和全局做用域，函数做用域确定是在全局做用域里面的，而函数做用域中又能够继续嵌套函数做用域，如图：

用代码表示：

以上两张图能够很直观的看出做用域的嵌套关系了吧。查找变量也是顺着红色的箭头走的，从里到外，这从里到外的各层做用域就组成了做用域链。

做用域中变量（标识符）的查找规则

首先声明一点，JavaScript是有编译过程的，不要惊讶，真的有！也就是说var name = 'iceman'这段代码，其实这是有两个动做的：

• 编译器在当前做用域中声明一个变量name

• 运行时引擎在做用域中查找该变量，找到了name变量并为其赋值

证实以上的说法：

console.log(name); // 输出undefined
var name = 'iceman'; 
复制代码

在var name = 'iceman'的上一行输出name变量，并无报错，输出undefined，说明输出的时候该变量已经存在了，只是没有赋值而已。

其实编译器是这样工做的，在代码执行以前从上到下的进行编译，当遇到某个用var声明的变量的时候，先检查在当前做用域下是否存在了该变量。若是存在，则忽略这个声明；若是不存在，则在当前做用域中声明该变量。

上面的这段简单的代码包含两种查找类型：输出变量的值的时候的查找类型是RHS，找到变量为其赋值的查找类型是LHS。

我猜各位同窗必定能够猜到“L”和“R”的含义，这里的左侧和右侧指的是在赋值操做的左侧和右侧。也就是说，变量出如今赋值操做的左侧时进行LHS查询，出如今右侧时进行RHS查询。

用一句通俗的话来说，RHS就是取到它的源值。

注意：“赋值操做的左侧和右侧”，并不意味着只是“=”，实际上赋值操做还有好几种形式。

在做用域中查找变量都是RHS，而且查找的规则是从当前做用域开始找，若是没找到再到父级做用域中找，一层层往外找，若是在全局做用域若是还没找到的话，就会报错了：ReferenceError: 某变量 is not defined

全部的赋值操做中查找变量都是LHS。其中a=4这类赋值操做，也是会从当前做用域中查找，若是没有找到再到外层做用域中找，若是到全局变量啊这个变量，在非严格模式下会建立一个全局变量a。不过，很是不建议这么作，由于轻则污染全局变量，重则形成内存泄漏（好比：a = 一个很是大的数组，a在全局变量中，一直用有引用，程序不会自动将其销毁）。

词法做用域

在上面的做用域介绍中，咱们将做用域定义为一套规则，这套规则来管理浏览器引擎如何在当前做用域以及嵌套的做用域中根据变量（标识符）进行变量查找。

咱们在前面有抛出一个概念：“词法做用域是做用域的一种工做模型”，做用域有两种工做模型，在JavaScript中的词法做用域是比较主流的一种，另外一种动态做用域（比较少的语言在用）。

所谓的词法做用域就是在你写代码时将变量和块做用域写在哪里来决定，也就是词法做用域是静态的做用域，在你书写代码时就肯定了。

请看如下代码：

function fn1(x) {
	var y = x + 4;
	function fn2(z) {
		console.log(x, y, z);
	}
	fn2(y * 5);
}
fn1(6); // 6 10 50
复制代码

这个例子中有个三个嵌套的做用域，如图：

• A 为全局做用域，有一个标识符：fn1

• B 为fn1所建立的做用域，有三个标识符：x、y、fn2

• C为fn2所建立的做用域，有一个标识符：z

做用域是由期代码写在哪里决定的，而且是逐级包含的。

在此强调，词法做用域就是做用域是由书写代码时函数声明的位置来决定的。编译阶段就可以知道所有标识符在哪里以及是如何声明的，因此词法做用域是静态的做用域，也就是词法做用域可以预测在执行代码的过程当中如何查找标识符。

注1：eval()和with能够经过其特殊性用来“欺骗”词法做用域，不过正常状况下都不建议使用，会产生性能问题。

注2：ES6中有了let、const就有了块级做用域，后面会专门介绍。

特别注意

能够关注个人公众号：icemanFE，接下来持续更新技术文章！