关于闭包的学习笔记

最新推荐文章于 2025-05-26 21:21:11 发布

原创最新推荐文章于 2025-05-26 21:21:11 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

写在前面

终于有学上了，开始回炉重造js基础，第一站就是魂牵梦绕的闭包～冴羽大大的文章帮了大忙，看完一套醍醐灌顶。也是理解了为什么实际应用场景不推荐首先考虑闭包。
实际上它只是一个计算机科学现象，它并不神秘。以下是js大部头原文：

This combination of a function object and a scope (a set of variable bindings) in which the function’s variables are resolved is called a closure in the computer science literature.

看见最后一个介词短语了嘛！the computer science literature！
注意：本文只是对闭包的形象化个人理解和总结，具体逻辑和理论知识还需同志们去查找大神的博客以及大部头。

提前了解的概念

在谈论闭包之前，我们需要简单了解一下执行上下文和作用域链的概念。先放一张脑图～
在这里插入图片描述

tips:个人理解this关键字和闭包关系并不是特别密切，这里就不展开了(其实是因为this板块太多，一张图截不下来)
如果对栈有一个基本了解，那么理解执行上下文的运行机制就非常容易了。执行上下文，顾名思义，就是当 js 代码执行一段可执行代码时，会创建对应的执行上下文。它有三个重要属性，分别是变量对象、作用域链和this。矛盾分析法告诉我们要抓主要矛盾，那么闭包的主要矛盾就是作用域链。
查找变量时，先从当前上下文查找变量对象，如果没有查找到，就向其父级执行上下文的变量对象中查找，一直查找到全局位置。那么这条路径就是作用域链，可以将它中二地理解为“羁绊”，因为有这条作用域链的存在，才使得闭包成为了可能。

### 一道经典题来一道82年的老题

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope();
foo();

答案直接推——local scope。那么问题来了，为什么不是全局变量global scope？

由作用域链引发的闭包

这里需要例行公事的提一下闭包的概念，闭包一是即使创建它的上下文已经销毁，它仍然存在；二是指在代码中饮用了自由变量。其中自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。
其实非常好理解，以此题为例，我们发现，当访问f时，checkscope上下文已经出栈，意味着local scope应该已经不存在了，那为什么最终结果依旧是它？实际上，f函数的作用域链中已经存有checkscope函数中的local scope，f作用域链顺序为全局——checkscope——f。所以，即使checkscope被销毁了，因为有了这条作用域链的“羁绊”，系统会自动保留local scope。此时，当我们在f函数找不到scope变量时，顺藤摸瓜找它的父级上下文，也就是checkscope，发现了local scope，这样就不再需要再寻找它的“爷爷”全局中的global scope。
不过在描述这个过程中，我们会发现一个问题，系统怎么知道应该保留哪个变量在内存中，如果这样的变量的数量达到了一个很可观的程度会怎么样？显然不会太乐观。系统不是人，无法智能销毁那些不需要在子结点访问的变量。所以，闭包慎用，尤其是大数据量的应用场景～