首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

JavaScript之闭包(1)

JavaScript之闭包(1)

概述

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

但是,闭包在 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 在其他地方执行,还是返回了正确结果。
返回列表