【JavaScript】(附面试题)深入理解作用域、作用域链和闭包

11,856 阅读8分钟

引言

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 块级作用域

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

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前端日记」,欢迎大家前来关注~