重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32873 人已学习
课程目录
已完结 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执行(四):try里面放return,finally还会执行吗?

winter 2019-03-02
你好,我是 winter。
在前面几篇文章中,我们已经了解了关于执行上下文、作用域、闭包之间的关系。
今天,我们则要说一说更为细节的部分:语句。
语句是任何编程语言的基础结构,与 JavaScript 对象一样,JavaScript 语句同样具有“看起来很像其它语言,但是其实一点都不一样”的特点。
我们比较常见的语句包括变量声明、表达式、条件、循环等,这些都是大家非常熟悉的东西,对于它们的行为,我在这里就不赘述了。
为了了解 JavaScript 语句有哪些特别之处,首先我们要看一个不太常见的例子,我会通过这个例子,来向你介绍 JavaScript 语句执行机制涉及的一种基础类型:Completion 类型。

Completion 类型

我们来看一个例子。在函数 foo 中,使用了一组 try 语句。我们可以先来做一个小实验,在 try 中有 return 语句,finally 中的内容还会执行吗?我们来看一段代码。
function foo(){
try{
return 0;
} catch(err) {
} finally {
console.log("a")
}
}
console.log(foo());
通过实际试验,我们可以看到,finally 确实执行了,而且 return 语句也生效了,foo() 返回了结果 0。
虽然 return 执行了,但是函数并没有立即返回,又执行了 finally 里面的内容,这样的行为违背了很多人的直觉。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(38)

  • 有铭
    很感兴趣这些高级特性的知识老师是从哪里学到的,我翻过js高级编程那本书都没讲到过这些
    2019-03-02
    1
    62
  • Rushan-Chen
    请问老师,表格中的“穿透”和“消费”是什么意思?
    2019-03-02
    1
    52
  • AICC
    3楼你好,我的理解是,消费指对应的代码被有效的执行了,穿透指对应代码被跳过了,也就是对应控制的语句体被有效执行比如try catch,当try中出现了throw,能被有效捕获进而执行catch,这在我理解就是try被消费执行了,而当catch中还有throw时,由于catch不具备处理throw的能力,于是catch被中断跳出,也就是作者所说的穿透,希望能帮到你
    2019-03-02
    32
  • 周小成
    穿透和消费,报错应该是连贯的,“穿透”就是指不在当前这一层处理,向外逐层寻找可以“消费”的那一层,直到最后都没找到就报错,比如:function里面有while, while里面有switch, switch里面又有continue,按图表来看,switch-continue应该是穿透,向上层寻找消费,碰到while-contine,那就是消费,再如switch里面是return, switch-return穿透,向上层whlie-return穿透,最后function-return是消费。
    2019-03-12
    29
  • 加利率的钟摆
    ```javascript
    function test(){
      if(true){
        console.log("111");
        break;
      }
      if(true){
        console.log("222");
      }
    }

    test(); // SyntaxError: Illegal break statement
    ```

    我们可以这么分析:

    1. if 和 break 相遇,break 穿透至 function
    2. function 和 break 相遇,报错

    ```javascript
    function test() {
      var a = 0;
      switch (a) {
        case 0:
          if (true) {
            console.log("111");
            break;
          }
      }

      if (true) {
        console.log("222");
      }
    }

    test();
    // 111
    // 222
    ```

    我们可以这么分析:

    1. if 和 break 相遇,break 穿透至 switch
    2. swicth 和 break 相遇,消费掉 break
    3. 接着执行之后的代码
    2019-04-17
    3
    10
  • Dream.
    第一次看见『消费』与『穿透』这样的描述。

    这两个词的来源自哪里呢?

    结合表格中的控制语句组合使用得到的结果来看,我的理解是

    『消费』是控制语句里的内容执行完毕。
    『穿透』是控制语句里的内容没能执行完,被中止了。
    2019-03-03
    8
  • 夜空中最亮的星(华仔)
    老师,我昨天成功的把您的课推销出去了一份,哈哈😄高兴
    2019-03-02
    6
  • 火云邪神0007
    老师在前面讲过,穿透就是去上一层的作用域或者控制语句找可以消费break,continue的执行环境,消费就是在这一层就执行了这个break或者continue
    2019-03-04
    5
  • K4SHIFZ
    老师,请出一份ES标准解读。带着我们学一次。必买!
    2019-03-29
    3
  • InfoQ_1ab80e8a55aa
    标准 https://tc39.github.io/ecma262/
    2019-05-29
    2
  • Brigand
    Completion 类型是个神马鬼?
    2019-03-04
    2
  • 小say
    老师你好,前面说[[value]]如果没有返回值就是empty但是为什么在Chrome调试器下显示的是undefined?
    后文中语句块中
    {
      var i = 1; // normal, empty, empty
      i ++; // normal, 1, empty
      console.log(i) //normal, undefined, empty
    } // normal, undefined, empty
    其中 var i = 1; 为什么[[value]]会是empty?console.log(i)的[[value]]为什么是undefined?所以到底什么时候是empty什么时候是undefined?

    作者回复: 是Chrome自己的规定。

    2019-09-17
    1
  • 明月
    我理解的穿透或者消费是break continue return thow对if等的影响范围 如果能影响到if层级之外就是穿透 如果是只影响if语句就是消费
    2019-08-15
    1
  • Jacky
    try finally 那个跟Java不是一样的吗
    2019-04-16
    1
    1
  • 靠人品去赢
    这个把completion称作一个类型,感觉有点怪,首先这个不是我们自己去定义的,这个是因为我们执行语句都会有这个东西。小白看到这个“类型”会往前找,发现没这个类型,之前掌握的的语言系统也没有相关的类型,结果就是“我擦,这是啥,ES6的新特性吗?”。关于这个,这是我在MDN上找的相关资料,希望大家指点一下(看run-to-completion这部分)https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
    2019-03-20
    1
  • 守候
    学到了
    2019-03-14
    1
  • 阿成
    涨姿势啦
    不过,从来没用过label...
    甚至第一次知道js里没有goto...
    2019-03-02
    1
  • csᵏᵒᵖ
    winter老师,特殊处理就是指后面的 “因为 finally 中的内容必须保证执行,所以 try/catch 执行完毕,即使得到的结果是非 normal 型的完成记录,也必须要执行 finally“ 吗

    作者回复: 没错,就是这个。

    2019-10-26
  • 尤璐洁
    winter老师,这些个私有属性的值执行时的值是如何得出的,是靠分析,还是说有某种方式可以看到验证呢?

    作者回复: 这是个概念模型,标准这样讲的,但是其实实现不一定这么实现,只要保证跟这个模型等效即可。

    2019-10-23
  • Smallfly
    winter 老师,有什么工具能查看 JS 引擎的运行时的特殊类型么?

    作者回复: 不能,事实上引擎不一定需要按照标准的模型来实现,只要保证运行效果等效即可。

    2019-10-17
收起评论
38
返回
顶部