阅读 27

今天我学到的(200331)

阅读列表

1、理解 ECMAScript 规范

  • v8.dev/blog/unders…
    • 如何在规范中查找 obj.hasOwnProperty('foo') 这条语句的执行流程。涉及到的概念:abstract operations(? 和 ! 简写的含义)、language types、specification types、internal slots 还有 internal methods。
    • 规范中使用的语言值(tc39.es/ecma262/#se…)并不等同于 JavaScript 中的。以布尔值 true、false 为例,如果 JS 引擎是使用 C++ 编写的,那么这里的 true、false 就是 C++ 里的 true、false,跟 JS 中的 true、false 内部表示是两个东西。
  • v8.dev/blog/unders…
    • 规范中原型链查找的内部执行流程

Return ? Foo() 展开后的步骤如下:

  1. Let temp be Foo().
  2. If temp is an abrupt completion, return temp.
  3. Set temp to temp.[[Value]].
  4. Return NormalCompletion(temp).

Let val be ! Foo() 等价于:

  1. Let val be Foo().
  2. Assert: val is not an abrupt completion.
  3. Set val to val.[[Value]].

2、读懂 ECMAScript 规格

  • 抽象操作(abstract operations)就是引擎的一些内部方法,外部不能调用。
  • 规范中将键值对(key-value map)的数据结构称为 Record,其中的每一组键值对称为 field。
  • 规范中大量使用 [[Notation]] 这种写法,表示对象内部内部属性/方法。
  • 执行步骤里的每一条语句都会返回一个 Completion Record,表示运行结果。每个 Completion Record 有一个[[Type]]属性,[[Type]] 值是“normal”的 Completion Record 称为,normal completion,否则称为 abrupt completion。
  • 抽象操作的简写:

最开始:

  1. Let result be AbstractOp().
  2. If result is an abrupt completion, return result.
  3. Set result to result.[[Value]].
  4. return result.

使用 ReturnIfAbrupt(result) 改写:

  1. Let result be AbstractOp().
  2. ReturnIfAbrupt(result).
  3. return result.

使用 ? AbstractOp() 进一步简写(? 表示可能会报错。可以把 ? xx 展开为  ReturnIfAbrupt(xx)):

  1. Let result be ? AbstractOp().
  2. return result.

甚至连 result 都可以不需要:

return ? AbstractOp().

除了 ?,ES 6 规格还使用另一个简写符号 !

  1. Let result be ! AbstractOp().
  2. return result.

上面流程的 !,代表 AbstractOp() 不会报错,返回的一定是 normal completion。 展开后:

  1. let result be AbstractOp().
  2. Assert: result not an abrupt completion.
  3. Set result to result.[[Value]].
  4. return result.

3、链判断运算符 & Nullish 合并运算符:ES2020 引入的两个运算符—— ?. 和 ??

  • 链判断运算符 ?.:如果运算符左侧对象为 nullundefined,则不再往下计算,直接返回 undefined
  • Nullish 合并运算符 ??:行为类似 ||,但只有在运算符左侧的值为 nullundefined 时,才会返回右侧的值。

?. 的额外解释:

a?.b
// 等同于
a == null ? undefined : a.b
复制代码

a == null 只在 anullundefined 的情况下才成立。

?. 的用法如下:

  • obj?.prop // 对象属性
  • obj?.[expr] // 同上
  • func?.(...args) // 函数或对象方法的调用

?? 的额外解释:

a??b
// 等同于
a == null ? b : a
复制代码

4、为什么每个前端开发者都要理解网页渲染? 浏览器渲染页面的步骤大致如:HTML 解析成 DOM,CSS 解析成 CSSOM -> DOM 和 CSSOM合并成 渲染树(不包含 head 标签和其他的 displa: none 元素) ->   布局:计算渲染树中的元素坐标 -> 绘制(显示布局)。

工具

1、Evernote Web Clipper:如何在 Chrome 浏览器中剪藏网页?

2、Nano ID:A tiny (108 bytes), secure, URL-friendly, unique string ID generator for JavaScript.

3、uid:A tiny (134B) and fast utility to generate random IDs of fixed length

4、await-to-js:Async await wrapper for easy error handling without try-catch

5、Papa Parse:The powerful, in-browser CSV parser for big boys and girls

资讯

1、2020 年 高考延期 一个月举行,考试时间为 7 月 7 日至 8 日。自 1977 年高考恢复以来,从未因故改期,包括 2003 年的“非典”。

2、3 月 30日 15 时,西昌市泸山 发生森林火灾,目前已造成19人遇难,其中 18 名为打火队员,1 名为当地向导。截至 31 日零时,过火面积 1000 公顷左右,毁坏面积初步估算 80 公顷左右。
2、美国知名成人杂志《花花公子》(Playboy)18日 宣布,因为新冠肺炎疫情对内容制作及供应链造成冲击,在美国的纸本杂志将停刊,2020年春季号是最后一期。

(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。

(完)

关注下面的标签,发现更多相似文章
评论