读懂 ECMAScript 规格

概述

规格文件是计算机语言的官方标准，详细描述语法规则和实现方法。

一般来说，没有必要阅读规格，除非你要写编译器。因为规格写得非常抽象和精炼，又缺乏实例，不容易理解，而且对于解决实际的应用问题，帮助不大。但是，如果你遇到疑难的语法问题，实在找不到答案，这时可以去查看规格文件，了解语言标准是怎么说的。规格是解决问题的“最后一招”。

这对 JavaScript 语言很有必要。因为它的使用场景复杂，语法规则不统一，例外很多，各种运行环境的行为不一致，导致奇怪的语法问题层出不穷，任何语法书都不可能囊括所有情况。查看规格，不失为一种解决语法问题的最可靠、最权威的终极方法。

本章介绍如何读懂 ECMAScript 6 的规格文件。

ECMAScript 6 的规格，可以在 ECMA 国际标准组织的官方网站（www.ecma-international.org/ecma-262/6.0/）免费下载和在线阅读。

这个规格文件相当庞大，一共有 26 章，A4 打印的话，足足有 545 页。它的特点就是规定得非常细致，每一个语法行为、每一个函数的实现都做了详尽的清晰的描述。基本上，编译器作者只要把每一步翻译成代码就可以了。这很大程度上，保证了所有 ES6 实现都有一致的行为。

ECMAScript 6 规格的 26 章之中，第 1 章到第 3 章是对文件本身的介绍，与语言关系不大。第 4 章是对这门语言总体设计的描述，有兴趣的读者可以读一下。第 5 章到第 8 章是语言宏观层面的描述。第 5 章是规格的名词解释和写法的介绍，第 6 章介绍数据类型，第 7 章介绍语言内部用到的抽象操作，第 8 章介绍代码如何运行。第 9 章到第 26 章介绍具体的语法。

对于一般用户来说，除了第 4 章，其他章节都涉及某一方面的细节，不用通读，只要在用到的时候，查阅相关章节即可。

术语

ES6 规格使用了一些专门的术语，了解这些术语，可以帮助你读懂规格。本节介绍其中的几个。

抽象操作

所谓”抽象操作“（abstract operations）就是引擎的一些内部方法，外部不能调用。规格定义了一系列的抽象操作，规定了它们的行为，留给各种引擎自己去实现。

举例来说，Boolean(value)的算法，第一步是这样的。

  1. Let b be ToBoolean(value).

这里的ToBoolean就是一个抽象操作，是引擎内部求出布尔值的算法。

许多函数的算法都会多次用到同样的步骤，所以 ES6 规格将它们抽出来，定义成”抽象操作“，方便描述。

Record 和 field

ES6 规格将键值对（key-value map）的数据结构称为 Record，其中的每一组键值对称为 field。这就是说，一个 Record 由多个 field 组成，而每个 field 都包含一个键名（key）和一个键值（value）。

[[Notation]]

ES6 规格大量使用[[Notation]]这种书写法，比如[[Value]]、[[Writable]]、[[Get]]、[[Set]]等等。它用来指代 field 的键名。

举例来说，obj是一个 Record，它有一个Prototype属性。ES6 规格不会写obj.Prototype，而是写obj.[[Prototype]]。一般来说，使用[[Notation]]这种书写法的属性，都是对象的内部属性。

所有的 JavaScript 函数都有一个内部属性[[Call]]，用来运行该函数。

F.[[Call]](V, argumentsList)

上面代码中，F是一个函数对象，[[Call]]是它的内部方法，F.[[call]]()表示运行该函数，V表示[[Call]]运行时this的值，argumentsList则是调用时传入函数的参数。

Completion Record

每一个语句都会返回一个 Completion Record，表示运行结果。每个 Completion Record 有一个[[Type]]属性，表示运行结果的类型。

[[Type]]属性有五种可能的值。

  • normal
  • return
  • throw
  • break
  • continue

如果[[Type]]的值是normal，就称为 normal completion，表示运行正常。其他的值，都称为 abrupt completion。其中，开发者只需要关注[[Type]]为throw的情况，即运行出错；break、continue、return这三个值都只出现在特定场景，可以不用考虑。

抽象操作的标准流程

抽象操作的运行流程，一般是下面这样。

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

上面的第一步是调用抽象操作AbstractOp()，得到resultCompletionRecord，这是一个 Completion Record。第二步，如果这个 Record 属于 abrupt completion，就将resultCompletionRecord返回给用户。如果此处没有返回，就表示运行结果正常，所得的值存放在resultCompletionRecord.[[Value]]属性。第三步，将这个值记为result。第四步，将result返回给用户。

ES6 规格将这个标准流程，使用简写的方式表达。

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

这个简写方式里面的ReturnIfAbrupt(result)，就代表了上面的第二步和第三步，即如果有报错，就返回错误，否则取出值。

甚至还有进一步的简写格式。

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

上面流程的?，就代表AbstractOp()可能会报错。一旦报错，就返回错误，否则取出值。

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

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

上面流程的!，代表AbstractOp()不会报错，返回的一定是 normal completion，总是可以取出值。

相等运算符

下面通过一些例子，介绍如何使用这份规格。

相等运算符（==）是一个很让人头痛的运算符，它的语法行为多变，不符合直觉。这个小节就看看规格怎么规定它的行为。

请看下面这个表达式，请问它的值是多少。

0 == null

如果你不确定答案，或者想知道语言内部怎么处理，就可以去查看规格，7.2.12 小节是对相等运算符（==）的描述。

规格对每一种语法行为的描述，都分成两部分：先是总体的行为描述，然后是实现的算法细节。相等运算符的总体描述，只有一句话。

“The comparison x == y, where x and y are values, produces true or false.”

上面这句话的意思是，相等运算符用于比较两个值，返回true或false。

下面是算法细节。

  1. ReturnIfAbrupt(x).
  2. ReturnIfAbrupt(y).
  3. If Type(x) is the same as Type(y), then
    1. Return the result of performing Strict Equality Comparison x === y.
  4. If x is null and y is undefined, return true.
  5. If x is undefined and y is null, return true.
  6. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).
  7. If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.
  8. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
  9. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
  10. If Type(x) is either String, Number, or Symbol and Type(y) is Object, then return the result of the comparison x == ToPrimitive(y).
  11. If Type(x) is Object and Type(y) is either String, Number, or Symbol, then return the result of the comparison ToPrimitive(x) == y.
  12. Return false.

上面这段算法，一共有 12 步，翻译如下。

  1. 如果x不是正常值（比如抛出一个错误），中断执行。
  2. 如果y不是正常值，中断执行。
  3. 如果Type(x)与Type(y)相同，执行严格相等运算x === y。
  4. 如果x是null，y是undefined，返回true。
  5. 如果x是undefined，y是null，返回true。
  6. 如果Type(x)是数值，Type(y)是字符串，返回x == ToNumber(y)的结果。
  7. 如果Type(x)是字符串，Type(y)是数值，返回ToNumber(x) == y的结果。
  8. 如果Type(x)是布尔值，返回ToNumber(x) == y的结果。
  9. 如果Type(y)是布尔值，返回x == ToNumber(y)的结果。
  10. 如果Type(x)是字符串或数值或Symbol值，Type(y)是对象，返回x == ToPrimitive(y)的结果。
  11. 如果Type(x)是对象，Type(y)是字符串或数值或Symbol值，返回ToPrimitive(x) == y的结果。
  12. 返回false。

由于0的类型是数值，null的类型是 Null（这是规格4.3.13 小节的规定，是内部 Type 运算的结果，跟typeof运算符无关）。因此上面的前 11 步都得不到结果，要到第 12 步才能得到false。

0 == null // false

数组的空位

下面再看另一个例子。

const a1 = [undefined, undefined, undefined];
const a2 = [, , ,];

a1.length // 3
a2.length // 3

a1[0] // undefined
a2[0] // undefined

a1[0] === a2[0] // true

上面代码中，数组a1的成员是三个undefined，数组a2的成员是三个空位。这两个数组很相似，长度都是 3，每个位置的成员读取出来都是undefined。

但是，它们实际上存在重大差异。

0 in a1 // true
0 in a2 // false

a1.hasOwnProperty(0) // true
a2.hasOwnProperty(0) // false

Object.keys(a1) // ["0", "1", "2"]
Object.keys(a2) // []

a1.map(n => 1) // [1, 1, 1]
a2.map(n => 1) // [, , ,]

上面代码一共列出了四种运算，数组a1和a2的结果都不一样。前三种运算（in运算符、数组的hasOwnProperty方法、Object.keys方法）都说明，数组a2取不到属性名。最后一种运算（数组的map方法）说明，数组a2没有发生遍历。

为什么a1与a2成员的行为不一致？数组的成员是undefined或空位，到底有什么不同？

规格的12.2.5 小节《数组的初始化》给出了答案。

“Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array, that element does not contribute to the length of the Array.”

翻译如下。

"数组成员可以省略。只要逗号前面没有任何表达式，数组的length属性就会加 1，并且相应增加其后成员的位置索引。被省略的成员不会被定义。如果被省略的成员是数组最后一个成员，则不会导致数组length属性增加。”

上面的规格说得很清楚，数组的空位会反映在length属性，也就是说空位有自己的位置，但是这个位置的值是未定义，即这个值是不存在的。如果一定要读取，结果就是undefined（因为undefined在 JavaScript 语言中表示不存在）。

这就解释了为什么in运算符、数组的hasOwnProperty方法、Object.keys方法，都取不到空位的属性名。因为这个属性名根本就不存在，规格里面没说要为空位分配属性名(位置索引），只说要为下一个元素的位置索引加 1。

至于为什么数组的map方法会跳过空位，请看下一节。

数组的 map 方法

规格的22.1.3.15 小节定义了数组的map方法。该小节先是总体描述map方法的行为，里面没有提到数组空位。

后面的算法描述是这样的。

  1. Let O be ToObject(this value).
  2. ReturnIfAbrupt(O).
  3. Let len be ToLength(Get(O, "length")).
  4. ReturnIfAbrupt(len).
  5. If IsCallable(callbackfn) is false, throw a TypeError exception.
  6. If thisArg was supplied, let T be thisArg; else let T be undefined.
  7. Let A be ArraySpeciesCreate(O, len).
  8. ReturnIfAbrupt(A).
  9. Let k be 0.
  10. Repeat, while k < len
    1. Let Pk be ToString(k).
    2. Let kPresent be HasProperty(O, Pk).
    3. ReturnIfAbrupt(kPresent).
    4. If kPresent is true, then
      1. Let kValue be Get(O, Pk).
      2. ReturnIfAbrupt(kValue).
      3. Let mappedValue be Call(callbackfn, T, ?kValue, k, O?).
      4. ReturnIfAbrupt(mappedValue).
      5. Let status be CreateDataPropertyOrThrow (A, Pk, mappedValue).
      6. ReturnIfAbrupt(status).
    5. Increase k by 1.
  11. Return A.

翻译如下。

  1. 得到当前数组的this对象
  2. 如果报错就返回
  3. 求出当前数组的length属性
  4. 如果报错就返回
  5. 如果 map 方法的参数callbackfn不可执行，就报错
  6. 如果 map 方法的参数之中，指定了this，就让T等于该参数，否则T为undefined
  7. 生成一个新的数组A，跟当前数组的length属性保持一致
  8. 如果报错就返回
  9. 设定k等于 0
  10. 只要k小于当前数组的length属性，就重复下面步骤
    1. 设定Pk等于ToString(k)，即将K转为字符串
    2. 设定kPresent等于HasProperty(O, Pk)，即求当前数组有没有指定属性
    3. 如果报错就返回
    4. 如果kPresent等于true，则进行下面步骤
      1. 设定kValue等于Get(O, Pk)，取出当前数组的指定属性
      2. 如果报错就返回
      3. 设定mappedValue等于Call(callbackfn, T, ?kValue, k, O?)，即执行回调函数
      4. 如果报错就返回
      5. 设定status等于CreateDataPropertyOrThrow (A, Pk, mappedValue)，即将回调函数的值放入A数组的指定位置
      6. 如果报错就返回
    5. k增加 1
  11. 返回A

仔细查看上面的算法，可以发现，当处理一个全是空位的数组时，前面步骤都没有问题。进入第 10 步中第 2 步时，kPresent会报错，因为空位对应的属性名，对于数组来说是不存在的，因此就会返回，不会进行后面的步骤。

const arr = [, , ,];
arr.map(n => {
  console.log(n);
  return 1;
}) // [, , ,]

上面代码中，arr是一个全是空位的数组，map方法遍历成员时，发现是空位，就直接跳过，不会进入回调函数。因此，回调函数里面的console.log语句根本不会执行，整个map方法返回一个全是空位的新数组。

V8 引擎对map方法的实现如下，可以看到跟规格的算法描述完全一致。

function ArrayMap(f, receiver) {
  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.map");

  // Pull out the length so that modifications to the length in the
  // loop will not affect the looping and side effects are visible.
  var array = TO_OBJECT(this);
  var length = TO_LENGTH_OR_UINT32(array.length);
  return InnerArrayMap(f, receiver, array, length);
}

function InnerArrayMap(f, receiver, array, length) {
  if (!IS_CALLABLE(f)) throw MakeTypeError(kCalledNonCallable, f);

  var accumulator = new InternalArray(length);
  var is_array = IS_ARRAY(array);
  var stepping = DEBUG_IS_STEPPING(f);
  for (var i = 0; i < length; i++) {
    if (HAS_INDEX(array, i, is_array)) {
      var element = array[i];
      // Prepare break slots for debugger step in.
      if (stepping) %DebugPrepareStepInIfStepping(f);
      accumulator[i] = %_Call(f, receiver, element, i, array);
    }
  }
  var result = new GlobalArray();
  %MoveArrayContents(accumulator, result);
  return result;
}

原文地址：https://www.cnblogs.com/navysummer/p/9689869.html

时间： 2024-09-30 01:28:01

读懂 ECMAScript 规格的相关文章

[转帖] 读懂YML文件.. 书买了还没看完...

Copy From https://www.cnblogs.com/CloudMan6/p/8370501.html 读懂 Deployment YAML - 每天5分钟玩转 Docker 容器技术(125) 既然要用 YAML 配置文件部署应用,现在就很有必要了解一下 Deployment 的配置格式,其他 Controller(比如 DaemonSet)非常类似. 还是以 nginx-deployment 为例,配置文件如下图所示: ① apiVersion 是当前配置格式的版本.② kin

换一种方式让你读懂莱特家族的

换一种方式让你读懂莱特家族的小秘密 你拥抱着它当从梦中醒来你执着地等待却不曾离开舍不得分开在每一次醒来静闭上了双眼它却又浮现不要再徘徊莱特就是你最美的期待 最新莱特币矿机金贝X5(Goldshell X5),设计紧凑坚固,硬件和后台操作系统都做了优化,提升了挖矿的效率和运行的稳定性,并且还提供矿场管理软件.金贝X5矿机后台操作系统(Yotta MC)不仅直观简便,支持多种语言,而且响应速度也非常的快.金贝X5就是你的不二之选.你不知道的那些事 你不知道的构架金贝X5采用的是全封闭风道前后双散热风

读懂TCP状态转移

读懂TCP状态变换的过程,对于理解网络编程颇有帮助,本文将对TCP状态转移过程进行介绍,但各个状态(总共11个)的含义不在本文介绍的范围. 内容来源:<UNIX网络编程>第一卷第二章2.6节,若是读者对某个知识点不太理解,请参考原文. TCP状态转换图(state transition diagram) 1. 建立连接(three-way hand shake) 主动打开(passive open):服务器必须准备好接受外来的连接,通常通过socket.bind和listen完成. 被动打开(

一张图读懂今日头条推荐机制

影响推荐量的因素是比较复杂的,总体来说投入运营精力更大,内容质量越高,推荐效果就越好. 当然,这是个大道理,关系的是内功.具体到短期内的推荐量增长,还是需要一些hack式的技巧: 1.内容是给人看的,但首先机器要能读懂,目前基本上机器只能理解文字,所以你的内容是给哪部分受众看的,一定要表达清楚,比如你是写足球的,你就少提科比,你就少写段子,否则机器理解错了,推错人群,读者不感兴趣,点击率一点,很快就不推荐了. 2.读者停留很重要,点进去就退出来的点击是无效的,甚至是负面效果.所以标题党要有限度,

5分钟读懂正则表达式

本文仅作针对不熟悉正则表达式的朋友,可以通过本文快速的"读"懂代码中令人不快的正则表达式,至于进一步熟练的写出正则表达式,请参考文章底部链接或阅读专业书籍. 如果你总感觉看书看不懂,建议阅读<如何阅读一本书> --题外话. 1. 正则表达式一般使用 / 和 / 包裹起来的.2. 字面量字符(直接量字符) /a/    匹配字符a /a1/  匹配a1中任一个 /\./   匹配除 \n 之外的任一字符 方括号 /[0-9]/        匹配从字符0到字符9的任意一个字符

读懂diff【转】

本文转载自:http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.html 读懂diff 作者: 阮一峰 日期: 2012年8月29日 diff是Unix系统的一个很重要的工具程序. 它用来比较两个文本文件的差异,是代码版本管理的基石之一.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件> diff就会告诉你,这两个文件有何差异.它的显示结果不太好懂,下面我就来说明,如何读懂diff. 一.diff的三种

用一个例子读懂 RequireJS

用一个例子读懂 RequireJS 例子来自官方,我稍微改造了一下,如下: // project.html <!DOCTYPE html> <html>     <head>         <title>requirejs</title>         <!-- data-main attribute tells require.js to load              scripts/main.js after require.

区块链产业生态、存在问题及政策建议|一文读懂新趋势

区块链产业生态.存在问题及政策建议|一文读懂新趋势 2017-03-03 09:47:50  来源: 腾讯研究院抢沙发 摘要:从技术上来讲,区块链是一种分布式的记账方法.说到记账,我们经历了从实物记账向电子记账的演变关键词: 区块链 中国信息通信研究院与腾讯研究院区块链联合课题组 卿苏德,中国信息通信研究院区块链研究团队研究员,主要研究方向为区块链和人工智能等. 一.区块链技术原理和发展趋势 01| 区块链--一种分布式记账方法 从技术上来讲,区块链是一种分布式的记账方法.说到记账,我们经历了从

教你读懂redmine中的甘特图

Redmine是用Ruby开发的基于web的项目管理软件,他可以自动绘制甘特图,对于我们了解项目进度有很重要的帮助.但很多新人小白在使用redmine时,就是当成一个简单的备忘录来使用,对于甘特图神马的根本就不care,那么如何正确的使用甘特图呢?如何读懂redmine中的甘特图呢? Redmine是可以根据建立的问题的开始时间.结束时间和完成百分比自动绘制甘特图的.所以我们要使用redmine的甘特图,必须在新建问题时根据项目计划设置好开始时间,预估结束时间,每天在结束一天的工作后,注意及时更