资讯专栏INFORMATION COLUMN

深入理解JavaScript (5) —— 闭包

longmon / 2781人阅读

摘要:以上是从作用域的角度对闭包的理解,我们还可以结合执行上下文栈来理解闭包。这就是需要理解闭包的核心内容。即,执行到第行时,全局上下文环境将变为活动状态,但是上下文环境依然会在执行上下文栈中。

理解了上下文环境、作用域、作用域链以及自由变量,我们再来聊聊闭包

我们不急于给出闭包的概念,先从应用闭包的两种情况 —— 1.函数作为返回值,2.函数作为参数被传递 —— 来直观的认识它。

第一,函数作为返回值
function fn() {
    var max = 10;
    
    return function bar(x) {
        if( x > max ) {
            console.log(x);
        }
    };
}

var f1 = fn();
f1(15);

如上代码,bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。至于如何跨作用域取值,可以参考上一节。

第二,函数作为参数被传递
var max = 10,
    fn = function(x) {
        console.log( x > max ? true : false );
    };

(function(f) {
    var max = 100;
    f(20);
})(fn);

如上代码中,fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(20)时,max变量的取值是10,而不是100,所以打印结果是true。

上一节讲到自由变量跨作用域取值时,曾经强调过:要去创建这个函数的作用域取值,而不是“父作用域”。理解了这一点,以上两段代码中,自由变量如何取值应该比较简单。

以上是从作用域的角度对闭包的理解,我们还可以结合执行上下文栈来理解闭包。

在前面讲执行上下文栈时说到,有些情况下,函数调用完成之后,其执行上下文环境不会接着被销毁。这就是需要理解闭包的核心内容。

咱们可以拿本文的第一段代码(稍作修改)来分析一下。

第一步,代码执行前(预处理阶段)生成全局上下文环境,并在执行时对其中的变量进行赋值。此时全局上下文环境是活动状态。

图片描述

第二步,执行第17行代码时,调用fn(),产生fn()执行上下文环境,压栈,并设置为活动状态。

第三步,执行完第17行,fn()调用完成。按理说应该销毁掉fn()的执行上下文环境,但是这里不能这么做。注意,重点来了:因为执行fn()时,返回的是一个函数。函数的特别之处在于可以创建一个独立的作用域。而正巧合的是,返回的这个函数体中,还有一个自由变量max要引用fn作用域下的fn()上下文环境中的max。因此,这个max不能被销毁,销毁了之后bar函数中的max就找不到值了。

因此,这里的fn()上下文环境不能被销毁,还依然存在与执行上下文栈中。

——即,执行到第18行时,全局上下文环境将变为活动状态,但是fn()上下文环境依然会在执行上下文栈中。另外,执行完第18行,全局上下文环境中的max被赋值为100。如下图:

第四步,执行到第20行,执行f1(15),即执行bar(15),创建bar(15)上下文环境,并将其设置为活动状态。

执行bar(15)时,max是自由变量,需要向创建bar函数的作用域中查找,找到了max的值为10。这个过程在作用域链一节已经讲过。

这里的重点就在于,创建bar函数是在执行fn()时创建的。fn()早就执行结束了,但是fn()执行上下文环境还存在与栈中,因此bar(15)时,max可以查找到。如果fn()上下文环境销毁了,那么max就找不到了。

使用闭包会增加内容开销,现在很明显了吧!

第五步,执行完20行就是上下文环境的销毁过程,这里就不再赘述了。

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

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

相关文章

  • 【进阶2-2期】JavaScript深入之从作用域链理解闭包

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

    simpleapples 评论0 收藏0
  • 【进阶2-3期】JavaScript深入闭包面试题解

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

    alanoddsoff 评论0 收藏0
  • Javascript 深入理解闭包

    摘要:要理解闭包,首先得理解作用域。作用域主要分为两种全局变量和局部变量。解决方法是,在退出函数之前,将不使用的局部变量全部删除。但闭包的情况不同简而言之,闭包就是内部函数和外部函数连接的一座桥梁,大人就是小孩与饭桌上所有菜的小助手。 闭包(closure)是Javascript语言的一个重点,也是难点,对于新手来说,概念过于抽象;而现在书上的大部分解释都比较含糊,本文将把闭包掰开了、揉碎了...

    Corwien 评论0 收藏0
  • 深入javascript——作用域和闭包

    摘要:注意由于闭包会额外的附带函数的作用域内部匿名函数携带外部函数的作用域,因此,闭包会比其它函数多占用些内存空间,过度的使用可能会导致内存占用的增加。 作用域和作用域链是javascript中非常重要的特性,对于他们的理解直接关系到对于整个javascript体系的理解,而闭包又是对作用域的延伸,也是在实际开发中经常使用的一个特性,实际上,不仅仅是javascript,在很多语言中都...

    oogh 评论0 收藏0
  • 理解Javascript闭包

    摘要:但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。可惜的是,并没有提供相关的成员和方法来访问闭包中的局部变量。 (收藏自 技术狂) 前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将...

    dayday_up 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<