重学前端
程劭非（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执行（四）：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
    33
  • 周小成
    穿透和消费，报错应该是连贯的，“穿透”就是指不在当前这一层处理，向外逐层寻找可以“消费”的那一层，直到最后都没找到就报错，比如：function里面有while, while里面有switch, switch里面又有continue，按图表来看，switch-continue应该是穿透，向上层寻找消费，碰到while-contine,那就是消费，再如switch里面是return, switch-return穿透，向上层whlie-return穿透，最后function-return是消费。
    2019-03-12
    31
  • 加利率的钟摆
    ```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
    11
  • 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
下载
客户端
返回
顶部