今天我学到的(200331)如何在规范中查找 obj.hasOwnProperty('foo') 这条语句的执行流程。涉

阅读列表

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() 展开后的步骤如下：

Let temp be Foo().

If temp is an abrupt completion, return temp.

Set temp to temp.[[Value]].

Return NormalCompletion(temp).

Let val be ! Foo() 等价于：

Let val be Foo().

Assert: val is not an abrupt completion.

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。
抽象操作的简写：

最开始：

Let result be AbstractOp().

If result is an abrupt completion, return result.

Set result to result.[[Value]].

return result.

使用 ReturnIfAbrupt(result) 改写：

Let result be AbstractOp().

ReturnIfAbrupt(result).

return result.

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

Let result be ? AbstractOp().

return result.

甚至连 result 都可以不需要：

return ? AbstractOp().

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

Let result be ! AbstractOp().

return result.

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

let result be AbstractOp().

Assert: result not an abrupt completion.

Set result to result.[[Value]].

return result.

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

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

?. 的额外解释：

a?.b
// 等同于
a == null ? undefined : a.b

a == null 只在 a 为 null 或 undefined 的情况下才成立。

?. 的用法如下：

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

?? 的额外解释：

a??b
// 等同于
a == null ? b : a

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