重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

JavaScript执行(二):闭包和执行上下文到底是怎么回事?

winter 2019-02-26
你好,我是 winter。
在上一课,我们了解了 JavaScript 执行中最粗粒度的任务:传给引擎执行的代码段。并且,我们还根据“由 JavaScript 引擎发起”还是“由宿主发起”,分成了宏观任务和微观任务,接下来我们继续去看一看更细的执行粒度。
一段 JavaScript 代码可能会包含函数调用的相关内容,从今天开始,我们就用两节课的时间来了解一下函数的执行。
我们今天要讲的知识在网上有不同的名字,比较常见的可能有:
闭包;
作用域链;
执行上下文;
this 值。
实际上,尽管它们是表示不同的意思的术语,所指向的几乎是同一部分知识,那就是函数执行过程相关的知识。我们可以简单看一下图。
看着也许会有点晕,别着急,我会和你共同理一下它们之间的关系。
当然,除了让你理解函数执行过程的知识,理清这些概念也非常重要。所以我们先来讲讲这个有点复杂的概念:闭包。

闭包

闭包翻译自英文单词 closure,这是个不太好翻译的词,在计算机领域,它就有三个完全不相同的意义:编译原理中,它是处理语法产生式的一个步骤;计算几何中,它表示包裹平面点集的凸多边形(翻译作凸包);而在编程语言领域,它表示一种函数。
闭包这个概念第一次出现在 1964 年的《The Computer Journal》上,由 P. J. Landin 在《The mechanical evaluation of expressions》一文中提出了 applicative expression 和 closure 的概念。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(62)

  • Geek_56013e
    老师您的专业知识太强了,文中包含很多专业术语,在介绍某专业术语时带上了其他专业术语,而这些带上的专业术语部分在网上搜也是解释不清,导致很多地方看不懂、看起来比较费劲、只能猜测大意。比如对于「realm」的描述,只提了中文意思是“国度”“领域”“范围”和“包含一组完整的内置对象,而且是复制关系”,看完文章后,在js领域还是不清楚具体「realm」是什么含义,只能大概猜测。希望老师后续文章如果解释某专业术语时带上的其他专业术语时,能以日常常见代码为例解释。
    2019-02-27
    131
  • James Bond
    说了半天闭包是什么呢?跟普通函数有什么区别呢!
    2019-03-12
    5
    102
  • _(:з」∠)_
    let 和 var 都不好用,98%的情况都是用 const
    2019-04-27
    16
  • 麦哲伦
    老师能解释下这个么?
    var b = 10;
    (function b(){
    b = 20;
    console.log(b); // [Function: b]
    })();

    作者回复: 这个地方比较特殊,"具有名称的函数表达式"会在外层词法环境和它自己执行产生的词法环境之间产生一个词法环境,再把自己的名称和值当作变量塞进去,所以你这里的b = 20 并没有改变外面的b,而是试图改变一个只读的变量b。

    这块知识有点偏,随便看看就好。

    2019-02-27
    2
    14
  • K4SHIFZ
    凡是{}包裹的代码都会产生let/const作用域吧?除了文中提到的for等,还有while,do while,代码块等
    2019-04-20
    8
  • Zach
    老师,关于realm最后一个示例

    var iframe = document.createElement('iframe')
    document.documentElement.appendChild(iframe)
    iframe.src="javascript:var b = {};"
    var b1 = iframe.contentWindow.b;
    var b2 = {};
    console.log(typeof b1, typeof b2); //object object
    console.log(b1 instanceof Object, b2 instanceof Object); //false true

    应该有点问题,typeof b1 的结果在chrome和Firefox中都显示为 undefined object
    2019-04-25
    2
    7
  • 0xAC7
    老师,可否稍加解释一下执行上下文的分类? 网络上的文章说“ JS 中可执行的代码可分为三种类型:全局代码、函数代码、eval 代码,对应三种执行上下文(全局执行上下文、函数执行上下文、eval 执行上下文),在 ECMAScript 2018 中没有找到这种说法的依据。我的意思是,我不太清楚这些文章的说法是否正确,是否不够全面。
    2019-04-14
    5
  • 乃乎
    更喜欢 const 哈哈
    2019-02-26
    5
  • 张祥儒
    winter大大,我觉得应该用global object,和active object 来解释这个闭包,作用域,执行器上下文。

    作者回复: 这是ES3里的解释法,现在已经解释不了很多语法了。

    2019-02-26
    5
  • 霍光传不可不读
    仔细看了下维基百科上面闭包的定义:闭包是一个record,它存储了一个函数和它的环境,这个环境存储了该函数的自由变量,js的函数完全符合这个定义,所以说js的函数其实就是闭包。倒是普通函数有点特别,我自己理解,这样的函数才是普通函数:
    function(a, b) {
        const c = 10
        return a + b + c;
    }
    这个函数只访问了自己的函数作用域内部的变量和参数,这样的函数才是所谓的普通函数,不知道这样理解对不对?
    2019-04-11
    3
    3
  • Snow同學
    函数就是闭包,这个理解对吗?
    2019-03-23
    1
    3
  • Geek_f51da4
    老师,闭包我是这样理解的,函数里边的函数,这样的理解对吗

    作者回复: 完全错了

    2019-06-12
    4
    2
  • Ron
    很少见到用void写IIFE,感觉大多时候我们还是需要引用IIFE返回的东西,可以参考一下https://developer.mozilla.org/en-US/docs/Glossary/IIFE
    2019-05-03
    2
  • 比利利
    我认为在目前的环境下,var已经没有存在的必要了,所有以前用var的情况都可以通过let和const代替,而且let和const更加符合大多数编程语言的习惯,而且现在有babel的话,写ES6语法也非常安全。
    2019-03-26
    2
  • 王小佳
    希望讲解能给通俗易懂一些。专业词汇太多,生涩
    2019-03-17
    2
  • 一步
    老师 我这有个问题:对于这段代码;
    var b;
    void function(){
        var env = {b:1};
        b = 2;
        console.log("In function start b:", b);
        with(env) {
            var b = 3;
            console.log("In with b:", b);
        }
    console.log("In function end b:", b);
    }();
    console.log("Global b:", b);

    打印结果是这样的:
    In function start b: 2
    In with b: 3
    In function end b: 2
    Global b: 10

    不知道是怎得出老师文章中结论的,我看下面有好多评论也是这样的疑问,麻烦老师解答一下呢
    2019-03-12
    1
    2
  • CC
    今天是自己第一次结构性整理清楚 JavaScript 的函数部分。原来它除了函数体之外,还包括了函数所处的环境,而其中的词法环境,其实只是执行上下文七个部分中的的一支。

    个人感觉 var 声明在不同的执行上下文中相对 let 更容易出错,同时也会增加冗余的临时变量。比如在 for loop 中,会遇到需要为不同的 loop 声明 i、j、k 变量。

    代码不仅是写给机器看,也是写给同行看的。let 会使代码更加简洁易读。
    2019-02-26
    2
  • Geek_b43014
    winter大大,请教一下,这个是不是跟上面评论的差不多的,也是有一个单独的词法环境,然后变量也是只读的呢?
    (function fn (b=3) {
    console.log(b)
    function b() {}
    console.log(b)
    var b = '1';
    })()

    那跟下面这种又有什么区别呢
    (function fn (b=3) {
    console.log(b)
    var b = function b() {}
    console.log(b)
    var b = '1';
    })()
    2019-05-18
    1
  • 谷鱼
    我一般都会更多使用let作用于每一块函数,或者业务逻辑,var一般除非是一些全局不变的,会单独放一个文件来引用
    2019-04-10
    1
  • 木棉
    var b;
                void function(){
                    var env = {b:1};
                    b=2;
                    console.log(b);
                    with(env){
                        var b=3;
                        console.log(b);
                    }
                }();
                console.log(b);
    这块的执行结果是:2,3,undefined,不懂为什么,希望老是可以详细解答一下。
    作用域这块的内容经常被问到,尤其是面试的时候做题,变量提升,闭包,立即执行的函数表达式等不同情况不同输出结果,总是各种被绕晕,希望老师可以帮忙梳理一下,谢谢
    2019-04-02
    1
收起评论
62
返回
顶部