图解JS闭包

Malina ·

更新时间:2024-11-14

· 578 次阅读

欢迎大家的交流，相互学习关注。

文章目录图解JS闭包一、基础概念1、什么是闭包2、为什么需要闭包呢3、特点4、何时使用5、如何使用6、函数生命周期7、例子实战二、JS中的作用域链(scope chain)概念：1、定义2、作用3、应用三、后记 图解JS闭包 一、基础概念 1、什么是闭包

简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。

2、为什么需要闭包呢

局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

3、特点

占用更多内存
不容易被释放

4、何时使用

既想反复使用，又想避免全局污染

5、如何使用

1.定义外层函数，封装被保护的局部变量。 2.定义内层函数，执行对外部函数变量的操作。 3.外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。

6、函数生命周期

直接上图，点击图片放大查看。要记住函数对象、作用域链对象、执行环境(EC)和活动对象(AO)这几个东西都啥时候出现，啥时候消失。
在这里插入图片描述

7、例子实战

看下面这个函数，函数对象的地址仅作标识，不代表真实的地址。

var getNum;//------------------------1
function getCounter() { // ----------2
    var n = 1; 
    var inner = function () { return n++; }
    return inner;
}
getNum = getCounter();//------------3
console.log(getNum()); //1 ---------4
console.log(getNum()); //2 ---------5

程序运行到2的时候：
在这里插入图片描述

程序运行到3的时候：
在这里插入图片描述

运行到4的时候，外层函数调用结束，AO对象释放，图中红线断了：
在这里插入图片描述

4处的代码执行时：
在这里插入图片描述

4处的代码执行完：
在这里插入图片描述

总结：可以看到内层函数对象被全局的变量getNum引用和外层函数的AO对象引用，外层函数的AO对象，内层函数本身的作用域链对象在函数调用完都无法被内存回收，因此占用了更多的内存空间，但是这样持久的保存了需要的n。

二、JS中的作用域链(scope chain)概念： 1、定义

每个人都有自己的生活环境，代码也一样，JS中的代码都有自己的“执行环境”。当代码在一个环境中定义时（函数调用之前），就会生成变量对象的作用域链。这个链条，从当前环境中的变量对象开始，上溯至父环境(包含环境)中的变量对象，再到父环境的父环境中的变量对象···一直上溯到全局执行环境的变量对象。想象着一条锁链，从最下面开始爬，一直爬到最上顶端。每一个节点，代表着这一层级环境中的变量对象。

需要注意的是，作用域链是根据函数定义时的位置确定的，而不是在调用时确定。这也叫做词法作用域。

在这里插入图片描述

2、作用

作用域链用来保证那些有权访问不同执行环境的代码，在对不同环境里的变量和函数访问时的有序性以及确定性。

3、应用

当解析一个标识符时，是沿着作用域链一级一级地上溯(回溯)搜索标识符的过程。如果找不到标识符，就会产生错误。

还是直接看代码吧：

var color = "blue";  //全局作用域
function changeColor(){
    if(color === "blue"){ //寻找`color`，此作用域(函数内)没有，则上溯到父级作用域，（这里是全局）找到了
          color = "red";
    }else{
          color = "blue";
    }
}
changeColor();
alert("Color is now " + color);

在这个例子中，函数changeColor的作用域链包含两个对象：它自己的变量对象（每个函数都有的arguments对象），以及全局环境中的变量对象。

再来看一个多层作用域链示例：

var weibing = "在";  //最外层守卫
var dajiangjun = "不在";  //2号大将军
function chengqiang(){  //城墙内
    var dajiangjun= "在";  //1号大将军
    function gongdian(){  //宫殿内
        var zaixiang = "不在";  //宰相
        if(zaixiang === "在")
             console.log("把宰相找来！");
        else if(dajiangjun === "在")
             console.log("把大将军找来！");
        else
             console.log("把卫兵找来！");
    }
     return gongdian();
}
 chengqiang();

在这里插入图片描述

想象这样一个场景：皇帝身居寝宫，寂寞了，想要招纳美女。那么首先想到的是宰相，他可以直接召见宰相，让宰相给自己办事。假如宰相不在，那么他可以召见大将军(职级低于宰相)，让大将军给自己干；碰巧，大将军也去喝酒了，那就直接召见卫兵。在这个例子中，皇帝找到大将军了。但是有人会问，这段代码里，有两个dajiangjun啊！对啊，可是，皇帝他老人家是从自己身边找人的。最外边的那个2号大将军，虽然也在，但是他没上朝，去考察去了。(没在城墙内)，所以就召见1号大将军喽。而且自然而然，在城墙外边的人(例如普通老百姓)，当然是见不到宰相和皇帝的啦。

如果还未理解可以查看【作用域链】

三、后记

喜欢的小伙伴可以关注我哦，每天更新哦
寻找志同道合的小伙伴，相互交流学习
微信搜索【妙趣前端】
在这里插入图片描述