JavaScript之闭包

huashiou 发布于2019-08-23 12:26 / 1451人阅读

摘要：以上描述，全部符合闭包的描述，那这就是闭包。二执行过程之前的文章讲了函数的执行上下文栈，变量对象，作用域链等内容，接下来通过闭包代码回顾代码是怎么样的执行过程。将活动对象压入作用域链顶端。函数执行结束，弹出执行上下文栈。

本文一共  1300 字，读完只需  5 分钟

概述

闭包, 可以说是每个前端工程师都听说的一个词，咋一看很难从字面上去理解，从而给人留下了闭包是一个重要又难以理解的概念。

但是，闭包在 JS 代码可以说是随处可见，闭包也只是计算机领域的一个概念而已，它的存在是因为 JS 的一些语言特性，比如：函数式语言，执行上下文，执行上下文栈,作用域链，词法作用域。

执行上下文：Execution Context
执行上下文栈：Execution Context Stack
作用域链：Scope Chain
作用域：Scope

本篇文章，将先给结论，到底什么是闭包，再来分析产生闭包的过程和原因。

一、什么是闭包

当函数记住并访问所在词法作用域的自由变量时，就产生了闭包，即使函数是在当前词法作用域外执行。
--《你不知道的 JavaScript》

来段经典的闭包代码：

function outter() {
    var a = 123;
    
    function inner() {
        console.log(a);
    }
    return inner;
}

var foo = outter();
foo();  // 123

内部函数 inner 记住了它被定义时的词法作用域，也就是 outter 的函数作用域，并访问了该作用域里的自由变量 a, 同时，inner 函数作用返回值，在外部作用域中被执行。

以上描述，全部符合闭包的描述，那这就是闭包。

二、执行过程

之前的文章讲了函数的执行上下文栈，变量对象，作用域链等内容，接下来通过闭包代码回顾代码是怎么样的执行过程。

function outter() {
    var a = 123;
    
    function inner() {
        console.log(a);
    }
    return inner;
}

var foo = outter();
foo();  // 123

进入全局代码的执行上下文，全局上下文被压入执行上下文栈。

ECStack = [
        globalContext
    ];

全局上下文创建全局变量对象，创建 this 并指向全局上下文。

globalContext = {
    VO: global,
    scope: [global.VO],
    this: global
}

全局上下文初始化时，outter 函数被创建，建立作用域链，复制 Scope 属性到 outter 函数的内部属性[[scope]]

  outter.[[scope]] = [     
    globalContext.VO
  ];

执行 outter 函数，创建 outter 函数执行上下文，将 outter 上下文压入执行上下文栈。

ECStack = [
        globalContext,
        outterContext
    ];

初始化 outter 函数执行上下文，用 arguments 创建活动对象，加入形参、函数声明、变量声明。将活动对象压入 outter 作用域链顶端。

outterContext = {
    AO: {
        arguments: {
            a: undefined,
        }
        length: 1
    },
    scope: undefined,
    inner: reference to function inner(){}
    Scope: [AO, globalContext.VO],
    this: undefined
}

outter 执行完毕，接着执行 outter 返回的被变量引用的函数 inner;

ECStack = [
        globalContext,
        innerContext
    ];

inner 函数初始化，过程和第4步一样。

innerContext = {
        AO: {
            arguments: {
                length: 0
            }
        },
        Scope: [AO, outterContext.AO, globalContext.VO],
        this: undefined
    }

inner 执行，沿着作用域链查找变量 a, 打印 a 值。

inner 函数执行结束，弹出执行上下文栈。

ECStack = [
        globalContext
    ];

在这个过程中，第 5 步，outter 已经执行结束，执行上下文按理来说已经被销毁，内部函数 inner 怎么还能访问 outter 作用域的变量呢。

正是由于闭包，inner 引用了它所在词法作用域的自由变量 a，inner 的作用域链中仍然是完整的, 尽管 inner 在其他地方执行，还是返回了正确结果。

三、函数式语言

闭包中，一个很重要的特点就是，内部函数作为一个数据被返回。这是由于 JS 是函数式语言，函数可以作为参数传递进函数，也可以作为一个数据返回。函数的嵌套构成了作用域的嵌套，也就有了作用域链。

由于函数具有作用域，且变量的寻找具有 “遮蔽效应”（从内到外，找到第一个就停止），使得局部作用域的变量对于外部作用域是不可见的，于是函数就有了封闭性，所以我们拿函数来包裹封装私有变量，同时也有了闭包。

四、自由变量

自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。

function outter() {
    var a = 123;
    
    function inner() {
        console.log(a);
    }
    return inner;
}

var foo = outter();
foo();  // 123

对于 inner 函数而言，变量 a, 不是它的函数参数，也不是它的局部变量，a 就是自由变量。

五、闭包的用处和缺点

从闭包的特点可以看出，自由变量保存在了内存中，并能间接访问。

那么闭包的作用就是：

隐藏私有变量，解决变量命名空间污染的问题。

缺点
如果闭包过多，变量常驻内存，肯定会占用大量内存空间。

总结

由于 JS 是函数式语言，当函数记住并访问所在词法作用域的自由变量时，就产生了闭包，即使函数是在当前词法作用域外执行。

闭包在 JS 代码中非常常见，不必把它想得太玄乎。

欢迎关注我的个人公众号“谢南波”，专注分享原创文章。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98506.html

JavaScript深入之闭包

摘要：深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义对闭包的定义为闭包是指那些能够访问自由变量的函数。 JavaScript深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义 MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。那什么是自由变量呢？自由变量是指在函数中使用的，但既不是函数参数也...

caige 2019-08-20 16:07 评论0 收藏0
【进阶2-3期】JavaScript深入之闭包面试题解

摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

alanoddsoff 2019-08-23 13:47 评论0 收藏0
【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
进击JavaScript之（三）玩转闭包

摘要：为了更好的理解，在阅读此文之前建议先阅读上一篇进击之词法作用域与作用域链什么是闭包闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。在中函数构成闭包。为了更好的理解，在阅读此文之前建议先阅读上一篇《进击JavaScript之词法作用域与作用域链》 1.什么是闭包闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。所谓的闭包就是...

cyixlq 2019-08-20 10:30 评论0 收藏0
【译】理解JavaScript：闭包

摘要：当面试中让我解释一下闭包时我懵逼了。这个解释开始可能有点晦涩，让我们抽丝剥茧摘下闭包的真面目。此文不详述作用域有专门的主题阐述，不过作用域是理解闭包原理的基础。这才是闭包的真正便利之处。闭包使用不当就会很坑。原文链接为什么深度学习JavaScript？ JavaScript如今是最流行的编程语言之一。它运行在浏览器、服务器、移动设备、桌面应用，也可能包括冰箱。无需我举其他再多不相干...

岳光 2019-08-22 17:17 评论0 收藏0
【前端工程师手册】JavaScript之闭包

摘要：闭包确实是一个说烂了的概念，校招社招都会被问到，今天总结一番。先下定义，闭包是函数和该函数的词法作用域的组合。在这个栗子里，函数以及它对变量的引用就构成了闭包。闭包和作用域对于闭包和作用域的关系，我的理解是闭包其实就是作用域的延伸。闭包确实是一个说烂了的概念，校招社招都会被问到，今天总结一番。先下定义，闭包是函数和该函数的词法作用域的组合。其实这个定义是比较教条的，可以直白的理解为闭...

CarlBenjamin 2019-08-22 17:11 评论0 收藏0