作用域
作用域是指程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。
ES6 之前，ES 只有全局作用域和函数作用域。
- 全局作用域中对象在代码中的任何地方都能被访问，其生命周期伴随着页面的生命周期。
- 函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。
ES6 新增 let 和 const 关键字实现块级作用域。 ES5 由于变量提升带来的变量会在不被察觉的情况下被覆盖掉、for 循环中本该被销毁的变量没有被销毁等一系列问题，为解决这些问题，ES6 引入 let 和 const 关键字，从而使 JavaScript 也能像其他语言一样拥有了块级作用域。
作用域链
我们知道，作用域就是存放变量和函数的地方，全局环境有全局作用域，全局作用域中存放了全局变量和全局函数。每个函数也有自己的作用域，函数作用域中存放了函数中定义的变量。
关于作用域链，很多人会感觉费解，但如果你理解了调用栈、执行上下文、词法环境、变量环境等概念，那么你理解起来作用域链也会很容易。
其实在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为 outer。
当一段代码使用了一个变量时，JavaScript 引擎首先会在“当前的执行上下文”中查找该变量：
function bar() {
console.log(myName)
}
function foo() {
var myName = "哇哇"
bar()
}
var myName = "哇"
foo()
上面代码在查找 myName 变量时，如果在当前的变量环境中没有查找到，那么 JavaScript 引擎会继续在 outer 所指向的执行上下文中查找。为了直观理解，你可以看下面这张图：
从图中可以看出，bar 函数和 foo 函数的 outer 都是指向全局上下文的，这也就意味着如果在 bar 函数或者 foo 函数中使用了外部变量，那么 JavaScript 引擎会去全局执行上下文中查找。我们把这个查找的链条就称为作用域链。
现在你知道变量是通过作用域链来查找的了，不过还有一个疑问没有解开，foo 函数调用的 bar 函数，那为什么 bar 函数的外部引用是全局执行上下文，而不是 foo 函数的执行上下文？
要回答这个问题，你还需要知道什么是词法作用域。这是因为在 JavaScript 执行过程中，其作用域链是由词法作用域决定的。
词法作用域
词法作用域定义：
词法作用域指变量的作用域不是执行时决定而是在定义时决定，也就是说通过静态分析就能确定，词法作用域取决于源码，因此词法作用域也叫做静态作用域。
我们可以通过下图进一步理解：
从图中可以看出，词法作用域就是根据代码的位置来决定的，其中 main 函数包含了 bar 函数，bar 函数中包含了 foo 函数，因为 JavaScript 作用域链是由词法作用域决定的，所以整个词法作用域链的顺序是：foo函数作用域-> bar 函数作用域-> main 函数作用域-> 全局作用域。词法作用域是代码阶段就决定好的，很函数是怎么点用的没有关系。
了解了词法作用域，我们就可以回答上面的问题了，根据词法作用域，foo 和 bar 的上级作用域都是全局作用域，所以如果 foo 或者 bar 函数使用了一个它们没有定义的变量，那么它们会到全局作用域去查找。也就是说，词法作用域是代码阶段就决定好的，和函数是怎么调用的没有关系。
块级作用域中的变量查找
前面我们通过全局作用域和函数级作用域来分析了作用域链，那接下来我们再来看看块级作用域中变量是如何查找的？
我们先看下面一段代码：
function bar() {
var myName = "Top"
let test1 = 100
if (1) {
let myName = "c"
console.log(test)
}
}
function foo() {
var myName = "You"
let test = 2
{
let test = 3
bar()
}
}
var myName = "蛙哇"
let myAge = 10
let test = 1
foo()
上面的代码最终返回 1，我们通过下图进行分析：
上面，通过 var 声明的变量和函数声明会存储在变量环境中，let/const 声明的变量会存储在词法环境。如果你不是很理解，可以先看调用栈相关的知识。
现在是执行到 bar 函数的 if 语块之内，需要打印出来变量 test，那么就需要查找到 test 变量的值，其查找过程我已经在上图中使用序号 1、2、3、4、5 标记出来了。
下面我就来解释下这个过程。首先是在 bar 函数的执行上下文中查找，但因为 bar 函数的执行上下文中没有定义 test 变量，所以根据词法作用域的规则，下一步就在 bar 函数的外部作用域中查找，也就是全局作用域。
闭包
MDN 中对闭包的定义：
函数和对其周围状态（词法环境）的引用捆绑在一起构成闭包。
具体来说：在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外函数中声明的变量，当通过调用外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包，比如下面外部函数 foo，那么这些变量的集合就称为 foo 函数的闭包。
接下来我们结合下面代码来理解什么是闭包：
function foo() {
var name = 'Top'
let test1 = 1
const test2 = 2
var innerBar = {
getName: function() {
console.log(test1)
return name
},
setName: function(newName) {
name = newName
}
}
return innerBar
}
var bar = foo()
bar.setName('You')
bar.getName()
console.log(bar.getName)
从上面的代码中可以看出，innerBar 是一个对象，包含了 getName 和 setName 的两个方法（通常我们把对象内部的函数称为方法）。你可以看到，这两个方法都是在 foo 函数内部定义的，并且这两个方法内部都使用了 name 和 test 两个变量。
根据词法作用域的规则，内部函数 getName 和 setName 总是可以访问它们外部函数 foo 中的变量， 所以当 innerBar 对象返回给全局变量 bar 时，虽然 foo 函数已经执行结束，但是 getName 和 setName 函数依然可以使用 foo 函数中的变量 name 和 test1。我们就可以把这个称之为 foo 函数的闭包。
由于 foo 函数产生了闭包，所以变量 myName 和 test1 并没有被销毁，而是保存在内存中，那么应该如何解释这个现象呢？
要解释这个现象，我们就得站在内存模型的角度来分析这段代码的执行流程。
- 当 JavaScript 引擎执行到 foo 函数时，首先会编译，并创建一个空执行上下文。
- 在编译过程中，遇到内部函数 setName，JavaScript 引擎还要对内部函数做一次快速的词法扫描，发现该内部函数引用了 foo 函数中的 myName 变量，由于是内部函数引用了外部函数的变量，所以 JavaScript 引擎判断这是一个闭包，于是在堆空间创建换一个“closure(foo)”的对象（这是一个内部对象，JavaScript 是无法访问的），用来保存 myName 变量。
- 接着继续扫描到 getName 方法时，发现该函数内部还引用变量 test1，于是 JavaScript 引擎又将 test1 添加到“closure(foo)”对象中。这时候堆中的“closure(foo)”对象中就包含了 myName 和 test1 两个变量了。
- 由于 test2 并没有被内部函数引用，所以 test2 依然保存在调用栈中。
总的来说，产生闭包的核心有两步：第一步是需要预扫描内部函数；第二步是把内部函数引用的外部变量保存到堆中。
闭包是怎么回收的
通常，如果引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭；但如果这个闭包以后不再使用的话，就会造成内存泄漏。
如果引用闭包的函数是个局部变量，等函数销毁后，在下次 JavaScript 引擎执行垃圾回收时，判断闭包这块内容如果已经不再被使用了，那么 JavaScript 引擎的垃圾回收器就会回收这块内存。
所以在使用闭包的时候，你要尽量注意一个原则：如果该闭包会一直使用，那么它可以作为全局变量而存在；但如果使用频率不高，而且占用内存又比较大的话，那就尽量让它成为一个局部变量。
