关于javascript:彻底搞懂JavaScript中的作用域和闭包

一、作用域

作用域是什么

简直所有的编程语言都有一个基本功能，就是可能存储变量的值，并且能在之后对这个值进行拜访和批改。

那这些变量存储在哪里？怎么找到它？因为只有找到它能力对它进行拜访和批改。

简略来说，作用域就是一套规定，用于确定在何处以及如何查找变量（标识符）。

那么问题来了，到底在哪里设置这些作用域的规定呢？怎么设置？

首先，咱们要晓得，一段代码在执行之前会经验三个步骤，统称为“编译”。

分词/词法剖析

这个过程会将字符串分解成有意义的代码块，这些代码块称为词法单元。

var a = 1;// 这段代码会被合成为五个词法单元：var 、 a 、 = 、 1 、 ;

解析/语法分析

这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表语法结构的树。这个树称为“形象语法树（AST）”

代码生成

这个过程是将AST转换为可执行的代码。

简略来说，用某种办法能够将var a = 2; 的形象语法树（AST）转化为一组机器指令，指令用来创立一个叫作a的变量，并将一个值2存在a中

在这个过程中，有3个重要的角色：

引擎：从头到尾负责整个JavaScript程序的编译及执行过程
编译器：负责语法分析及代码生成
作用域（明天的配角）：负责收集并保护由所有申明的变量（标识符）注册的一系列查问，并施行一套严格的规定，确定以后执行的代码对这些变量的拜访权限。

所以，看似简略的一段代码 var a = 1; 编译器是怎么解决的呢？

var a = 1;

首先，遇到 var a, 编译器会询问作用域是否曾经有一个该名称的变量存在于同一个作用域中。如果是，编译器会疏忽该申明，持续下一步。否则编译器会要求作用域在以后作用域中申明一个新变量，并命名为a
其次，编译器会为引擎生成运行时所需的代码，用来解决 a = 1 这个赋值操作。引擎运行时首先询问作用域，以后作用域是否存在一个叫a的变量，如果是，引擎会应用这个变量，否则引擎会持续查找该变量，如果找到了，就会将1赋值给它，否则引擎会抛出一个异样。

那么，引擎是如何查找变量的？

引擎会为变量 a 进行LHS查问（左侧）。另外一个叫RHS查问（右侧）

简略来说，LHS查问就是试图找到变量的容器自身（比方a）；而RHS查问就是查问某个变量的值（比方1）

总结：作用域就是依据名称查找变量的一套规定。

作用域嵌套

当一个块或函数嵌套在另一个块或函数中时，就产生了作用域的嵌套。因而，在以后作用域中无奈找到某个变量时，引擎就会在外层嵌套的作用域中持续查找，直到找到该变量，或到达最外层的作用域（也就是全局作用域）为止。

function add(a) {  console.log(a + b)}var b = 2;add(1) // 3

在add()外部对b进行RHS查问，发现查问不到，但能够在上一级作用域（这里是全局作用域）中查问到。

怎么辨别LHS和RHS查问？思考以下代码

function add(a) {  // 对b进行RHS查问 无奈找到（未声明）  console.log(a + b) // 对变量b来说，取值操作  b = a // 对变量b来说，赋值操作}add(1) // ReferenceError: b is not defined

function add(a) {  // 对b进行LHS查问，无奈找到，会主动创立一个全局变量window.b（非严格模式）  b = a  // 对变量b来说，赋值操作  console.log(a + b)// 对变量b来说，取值操作}add(1) // 2

总结：如果查找变量的目标是赋值，则进行LHS查问；如果是取值，则进行RHS查问

词法作用域

作用域有两种次要的工作模型。第一种最为广泛，也是重点，叫作词法作用域，另一种叫作动静作用域（简直不必）

简略来说，词法作用域就是定义在词法阶段的作用域（通俗易懂的说，就是在写代码时变量或者函数申明的地位）。

function foo(a) {  var b = a * 2    function bar(c) {    console.log(a, b, c)  }    bar(b * 3)}foo(2) // 2, 4, 12

全局作用域中有1个变量：foo
foo作用域中有3个变量：a、b、bar
bar作用域中有1个变量：c

变量查找的过程：首先从最外部的作用域（即bar函数）的作用域开始查找，引擎无奈找到变量a，因而会到上一级作用域（foo函数）中持续查找，在这里找到了变量a，因而引擎应用了这个援用。变量b同理，对于变量c来说，引擎在bar函数中的作用域就找到了它。

留神：作用域查找会在找到第一个匹配的变量（标识符）时进行查找。

函数作用域

简略来说，函数作用域是指，属于这个函数的全副变量都能够在这个函数范畴内应用及复用（复用：即在嵌套的其余作用域中也能够应用）。

var a = 1// 定义一个函数包裹代码块，形成函数作用域function foo() {  var a = 2  console.log(a) // 2}foo()console.log(a) // 1

你会感觉，如果我要应用函数作用域，那么我必须定义一个foo函数，这让全局作用域多了个函数，净化了全局作用域，且必须执行一次该函数能力运行其中的代码块。

那有没有一种方法，能够让我不净化全局作用域（即不定义新的具名函数），且函数能够主动执行呢？

你肯定想到了，IIFE（立刻执行函数）

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

这种写法，实际上不是一个函数申明，而是一个函数表达式。要辨别这两者，最简略的办法就是看function关键字是否呈现在第一个地位（第一个词），如果是，那么是函数申明，否则是一个函数表达式。

块作用域

只管你可能没写过块作用域的代码，但你肯定对上面的代码块很相熟：

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

咱们在for循环的头部定义了变量i，是因为想在for循环外部的上下文中应用i，而疏忽了最重要的一点：i会被绑定在内部作用域（即全局作用域中）。

ES6扭转了这种状况，引入let关键字，提供另一种申明变量的形式。

{  let a = 2;  console.log(a) // 2}console.log(a) // ReferenceError: a is not defined

讨论一下之前的for循环

for(let i = 0; i < 5; i++) {  console.log(i)}console.log(i) // ReferenceError: i is not defined

这里，for循环头部的i绑定在循环外部，其实它在每一次循环中，对i进行了从新赋值。

{  let j;  for(let j = 0; j < 5; j++) {    let i = j // 每次循环从新赋值    console.log(i)  }  j++}console.log(i) // ReferenceError: i is not defined

小常识：其实在ES6之前，应用try/catch构造（在catch分句中）也有块作用域

晋升

先有鸡（申明）还是先有蛋（赋值）？

简略来说，一个作用域中，包含变量和函数在内的所有申明都会在任何代码被执行前首先被 “挪动” 到作用域的最顶端，这个过程就叫作晋升。

a = 2var aconsole.log(a) // 2// 引擎解析：var aa = 2console.log(a) // 2

console.log(a) // undefinedvar a = 2//引擎解析：var aconsole.log(a) // undefineda = 2

能够发现，当JavaScript看到 var a = 2; 时，会分成两个阶段，编译阶段和执行阶段。

编译阶段：定义申明，var a

执行阶段：赋值申明，a = 2

论断：先有蛋（申明），后有鸡（赋值）。

函数优先

函数和变量都会晋升，但函数会首先被晋升，而后是变量。

foo() // 2var foo = 1function foo() {  console.log(2)}foo = function() {  console.log(3)}// 引擎解析：function foo() {...}foo()foo = function() {...}

多个同名函数，前面的会笼罩后面的函数

foo() // 3var foo = 1function foo() {  console.log(2)}function foo() {  console.log(3)}

晋升不受条件判断管制

foo() // 2if (true) {  function foo() {    console.log(1)  }} else {  function foo() {    console.log(2)  }}

留神：尽量避免一般的var申明和函数申明混合在一起应用。

二、闭包

定义：当函数能够记住并拜访所在的词法作用域时，就产生了闭包，即便函数是在以后词法作用域之外执行。

秘诀：JavaScript中闭包无处不在，你只须要可能辨认并拥抱它。

function foo() {  var a = 2    function bar() {    console.log(a)  }    return bar}var baz = foo()baz() // 2 快看啊，这就是闭包！！！

函数bar()的词法作用域可能拜访foo()的外部作用域，而后将bar()自身当作一个值类型进行传递。

失常状况下，当foo()执行后，foo()外部的作用域都会被销毁（引擎的垃圾回收机制），而闭包的“神奇”之处就是能够阻止这件事请的产生。事实上foo()外部的作用域仍然存在，不然bar()外面无法访问到foo()作用域内的变量a

foo()执行后，bar()仍然持有该作用域的援用，而这个援用就叫作闭包。

总结：无论何时何地，如果将函数当作值类型进行传递，你就会看到闭包在这些函数中的利用（定时器，ajax申请，事件监听器...）。

我置信你懂了！

回顾一下之前提到的for循环

for(var i = 0; i < 10; i++) {  setTimeout(function timer() {    console.log(i)  }, i * 1000)}

冀望：每秒顺次打印1、2、3、4、5...9

后果：每秒打印的都是10

稍稍改良一下代码（利用IIFE）

for(var i = 0; i < 10; i++) {  (function(i) {    setTimeout(function timer() {        console.log(i)    }, i * 1000)  })(i)}

问题解决！对了，咱们差点忘了let关键字

for(var i = 0; i < 10; i++) {  let j = i // 闭包的块作用域  setTimeout(function timer() {    console.log(j)  }, j * 1000)}

还记得吗？之前有提到，for循环头部的let申明在每次迭代都会从新申明赋值，而且每个迭代都会应用上一个迭代完结的值来进行这次值的初始化。

最终版：

for(let i = 0; i < 10; i++) {  setTimeout(function timer() {    console.log(i)  }, i * 1000)}

好了，当初你必定懂了！

总结：当函数能够记住并拜访所在的词法作用域，即便函数是在以后的词法作用域之外执行，就产生了闭包。

如果你保持看到了这里，我替你感到高兴，因为你曾经把握了JavaScript中的作用域和闭包，这些常识都是进阶必备的，如果有不了解的，花工夫多看几遍，置信你肯定能够把握其中的精华。

都到这儿了！

点个关注再走呗！！