引言

在JavaScript中有作用域、作用域链和闭包。我们最开始可能觉得知道这些的定义就算懂了（刚入门时的我也是这样），但是当深入了解的时候，发现自己知道的只是皮毛。所以，这篇文章将详细讲解作用域、作用域链和闭包。

我们先借助一道题，了解一下作用域、作用域链和闭包的形成过程~

let x = 1;
function A(y){
   let x = 2;
   function B(z){
       console.log(x+y+z);
   }
   return B;
}
let C = A(2);
C(3);

对于上面的这张解答图，有如下解释：

当创建一个函数时，会创建一个堆，同时初始化当前函数作用域，作用域([[Scope]])为所在上下文中的变量对象VO/AO。
当执行一个函数时，会创建新的执行上下文 -> 初始化this指向 -> 初始化作用域链([[ScopeChain]]) -> 创建AO变量对象存储变量
在EC(A)执行上下文中，堆被全局变量C所占用，不能出栈销毁，此时就形成了闭包。
图里面红线所代表的就是作用域链，在一个作用域中，它所需要的变量在当前作用域中没有，就会一层一层向上查找。

这样简单的一个题，引出了作用域、作用域链、闭包的概念，下面本篇文章将正式对它们进行讲解。

一、作用域

作用域([[Scope]])就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

1.1 词法作用域与动态作用域

1.1.1 词法作用域

词法作用域也是静态作用域，在JavaScript中采用的就是词法作用域。词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里决定的。因此当词法分析器处理代码时会保持作用域不变（大部分情况是这样）

下面一个例子帮助理解：

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

假如上述例子采用了词法作用域，那么它的执行过程就是：

首先执行bar()函数，在bar()函数中执行foo()函数，foo()函数中输出value的值。它首先会查找当前作用域中是否有value，如果没有，则会向外一层查找，则最后输出了1

1.1.2 动态作用域

动态作用域即是与词法作用域相反的。我们还是以上面的例子为例：

假如上述例子采用动态作用域：

它依然会像采用词法作用域的形式执行函数，唯一不一样的地方在于：在执行foo()函数时，他不会向外一层查找value，而是从调用的函数作用域中查找，所以最后的结果输出为2。

1.2 全局作用域

在代码任何地方都能访问到的对象拥有全局作用域，一般拥有全局作用域有以下三种情形

1.2.1 最外层函数和在最外层函数外面定义的变量

var globalValue = `global value`;

function checkGlobal() {
    var localValue = `local value`;
    console.log(localValue);                // "local value"
    console.log(globalValue);               // "global value"
}

console.log(globalValue);                   // "global value"
console.log(checkGlobal);                   // "global value"
console.log(localValue);                    // "Uncaught ReferenceError: localValue is not defined"

在上面的例子中，globalValue就是一个全局变量，无论在哪都能访问，而localValue是一个局部变量，只能在函数内部访问

1.2.2 所有未定义直接赋值的变量

function checkGlobal() {
    var localValue = 'local value';
    globalValue = 'global value';
    console.log(localValue, globalValue);    // 'local value' 'globalValue'
}

console.log(globalValue);                    // 'globalValue'
console.log(localValue);                     // "Uncaught ReferenceError: localValue is not defined"

1.2.3 所有window对象的属性

1.3 函数作用域

函数作用域，就是指声明在函数内部的变量，它正好和全局作用域相反。内层作用域可以访问到外层作用域，而外层作用域不能访问到内层作用域。

function check() {
    var localValue = 'local value';
    console.log(localValue);          // 'local value'
}
 
console.log(localValue);              // "Uncaught ReferenceError: localValue is not defined"

1.4 块级作用域

块级作用域可通过let和const声明，声明后的变量再指定块级作用域外无法被访问。

1.4.1 块级作用域被创建的情况

在一个函数内部
在一个代码块内部

1.4.2 块级作用域的特点

声明的变量不会提升到代码块顶部

let或者const声明的变量不会被提升到当前作用域顶部。

function check(bool) {
    if(bool) {
        let result = 1;
        console.log(result);
    }
    console.log(result);
}

check(true);   // 1 Uncaught ReferenceError: result is not defined
check(false);  // Uncaught ReferenceError: result is not defined

如果想要访问到result，需要自己手动将变量提升到当前作用域顶部。像这样

function check(bool) {
    let result = null;
    if(bool){
        result = 1
    }
    console.log(result);
}
....

禁止重复声明

在同层级的作用域内，已经声明过的变量，不可以再次声明。

// 1.同层级作用域
var bool = true;
let bool = false;    // Uncaught SyntaxError: Identifier 'bool' has already been declared

// 不同层级作用域
var bool = true;
function check() {
    let bool = false;   // 这里不会报错
    // .....
}

在循环中的使用

在for循环中声明的变量仅在循环内部使用。

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

但是循环内部又是一个单独的作用域

for(let i = 0; i < 2; i++) {
    let i = 'hello';
    console.log(i);    // 'hello' 'hello' 
}

二、作用域链

2.1 作用域链的定义及形成

当所需要的变量在所在的作用域中查找不到的时候，它会一层一层向上查找，直到找到全局作用域还没有找到的时候，就会放弃查找。这种一层一层的关系，就是作用域链。

var a = 1;

function check() {
    return function() {
        console.log(a); // 当前作用域内找不到a,会向上一层一层查找，最后找到了全局下的a,输出结果为1
        console.log(b); // 同理，所以输出"Uncaught ReferenceError: b is not defined"
    }
}

var func = check();   // 此时返回匿名函数
func();               // 执行匿名函数

三、闭包

3.1 闭包的定义

当函数可以记住并访问所在的词法作用域时，就产生了闭包。即使函数是在当前词法作用域之外执行。

3.2 闭包的形成

我们来看一段代码

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

var bar = foo();
bar();

foo()函数的执行结果返回给bar，而此时由于变量a还在使用，因而没有被销毁，然后执行bar()函数。这样，我们就能在外部作用域访问到函数内部作用域的变量。这个就是闭包。

闭包的形成条件：

函数嵌套
内部函数引用外部函数的局部变量

3.3 闭包的作用

可以读取函数内部的变量
可以使变量的值长期保存在内存中，生命周期比较长。
可用来实现JS模块（JQuery库等）

JS模块是具有特定功能的JS文件，将所有的数据和功能都封装在一个函数内部(私有的)，只向外暴露一个包含多个方法的对象或函数，模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能。

(function() {
    var a = 1;
    
    function test() {
        return a;
    }
    
    window.module = {a, test};  // 向外暴露
})()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./1.js"> </script>
    <title>Document</title>
</head>
<body>
    <script>
        console.log(module.a);          // 1
        console.log(module.test());     // 1
    </script>
</body>
</html>

3.4 闭包的特性

每个函数都是闭包，函数能够记住自己定义时所处的作用域，函数走到了哪，定义时的作用域就到了哪。
内存泄漏

内存泄漏就是一个对象在你不需要它的时候仍然存在。所以不能滥用闭包。当我们使用完闭包后，应该将引用变量置为null。

function outer(){
    var num = 0;
    return function add(){
        num++;
        console.log(num);
    };
 }
var func1 = outer();
func1();              // 1
func1();              // 2  [没有被释放，一直被占用]
var func2 = outer();
func2();              // 1  [重新引用函数时，闭包是新的]
func2();              // 2

3.5 闭包的应用

现在要求实现点击第几个button就输出几

先写一个html

<button>1</button>
<button>2</button>

再来写JS

let buttons = document.getElementsByTagName('button');

for(var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
        console.log(i + 1);
    }
}

第一次我们可能会写出这样的代码，但是我们会发现，这个代码存在问题，无论我点第几个按钮，都会输出3。这是因为此时的i是全局变量，当执行点击事件时，i已经变成了3

我们可以用两种方式解决这个问题

let声明

将上述代码中的var改为let

闭包

for(var i = 0; i < buttons.length; i++) {
    (function(k){
        buttons[k].onclick = function() {
            console.log(k + 1);
        }
    })(i)
}

面试题

let x = 5;
function fn(x) {
    return function(y) {
        console.log(y + (++x));
    }
}
let f = fn(6);
f(7);   
console.log(x);

总结

本篇文章主要讲解了关于作用域、作用域链和闭包的知识，如果觉得对你有帮助，可以给本篇文章点个赞呀~如果有哪里不对的地方，还请大家指出来，我们共同学习、共同进步~

最后，分享一下我的公众号「web前端日记」，欢迎大家前来关注~