前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >理解ECMAScript规范(2)

理解ECMAScript规范(2)

作者头像
前端老王
发布于 2020-09-23 07:34:26
发布于 2020-09-23 07:34:26
43600
代码可运行
举报
文章被收录于专栏:前端时空前端时空
运行总次数:0
代码可运行

编者按:本文是由 李松峰 翻译,翻译本文的目的是尝试给出 ECMAScript 规范中核心术语的译法,供同好品评。 本文英文原文:https://v8.dev/blog/understanding-ecmascript-part-2

如果你还没有阅读 理解ECMAScript规范(1)的话,可以先阅读:理解 ECMAScript 规范(1)

要理解规范,可以拿一个我们知道的 JavaScript 特性,看看它是怎么规定的。

注意,本文包含从2020年2月的ECMAScript规范中复制的算法,请以正式规范为准。

我们知道,访问对象的属性需要走查(walk)原型链。如果对象上没有要读的属性,就会沿原型链逐级查找,直到找到这个属性(或者找到一个没有原型的对象)。(这个过程我们可以称其为原型链走查或走查原型链。——译者注)

比如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const o1 = { foo: 99 };
const o2 = {};
Object.setPrototypeOf(o2, o1);
o2.foo;// → 99

这种原型走查是在哪里定义的?

最好的起点是对象内部方法。

有两个与查找属性相关的内部方法:[[GetOwnProperty]][[Get]]。我们感兴趣的是不限制自有(own)属性的,所以就搜[[Get]]吧。

可是,属性描述符规范类型(Property Descriptor)也有一个字段叫[[Get]]。因此搜索的时候要注意从它们不同的用法来区分。

[[Get]]是一个基本内部方法(essential interal mehtod)。普通对象(ordinary object)都必须实现基本内部方法定义的默认行为。而异质对象(exotic object)则可以定义自己的内部方法[[Get]],其行为与默认行为不同。本文只涉及普通对象,因而不涉及自定义内部方法。

[[Get]]的默认实现委托到了OrdinaryGet(这是一个抽象操作。——译者注):

[[Get]] ( P, Receiver ) 在以属性键P和ECMAScript语言值Receiver调用O的内部方法[[Get]]时,执行如下步骤:

  1. 返回? OrdinaryGet(O, P, Receiver)

在调用访问器属性的获取函数(getter)时,Receiver将被用作this值。稍后还会看到。

OrdinaryGet的定义如下:

OrdinaryGet ( O, P, Receiver ) 在以对象O、属性键P和ECMAScript语言值Receiver调用抽象操作OrdinaryGet时,将执行以下步骤:

  1. 断言:IsPropertyKey(P)true
  2. desc? O.[[GetOwnProperty]](P)
  3. descundefined,则 a. 令parent? O.[[GetPrototypeOf]](); b. 若parentnull,返回undefined; c. 返回? parent.[[Get]](P, Receiver)
  4. IsDataDescriptor(desc)true,返回desc.[[Value]]
  5. 断言:IsAccessorDescriptor(desc)true
  6. getterdesc.[[Get]]
  7. getterundefined,返回undefined
  8. 返回? Call(getter, Receiver)

原型链走查是在第3步定义的:如果上一步没找到同名的自有属性,则调用原型的[[Get]]方法,于是又会委托到OrdinaryGet抽象操作。如果在第一个原型上还没找到属性,则调用它的原型的[[Get]]方法,于是又会委托到OrdinaryGet抽象操作。如此往复,直至找到属性或者遇到一个没有原型的对象。

下面通过分析访问o2.foo的过程来理解这个算法。首先,以o2O"foo"P调用OrdinaryGetO.[[GetOwnProperty]]("foo")返回undefined,因为o2没有叫"foo"的自有属性。于是就进入第3步的分支。在3.a中,把parent设置为o2的原型,也就是o1parent不是null,因此不会在3.b返回。在3.c中,调用parent[[Get]]方法,传入"foo",并返回调用的结果。

parento1)是普通对象,因此其[[Get]]方法会再次调用OrdinaryGet。这一次Oo1P"foo"o1有一个叫"foo"的自有属性,因此第2步O.[[GetOwnProperty]]("foo")返回相应的属性描述符,并将其保存在desc中。

属性描述符是一种规范类型。数据属性描述符把属性的值直接保存在[[Value]]字段。访问器属性描述符把访问器函数保存在[[Get]]和/或[[Set]]字段。这里与"foo"关联的属性描述符是一个数据属性描述符。

第2步保存在desc中的数据属性描述符不是undefined,因此不会走到第3步的分支。接着执行第4步,因为这个属性描述符是数据属性描述符,所以返回了其[[Value]]字段的值99。这样到第4步就结束了。

Receiver是什么?它是从哪来的?

Receiver参数在算法第8步是访问器属性的情况下才用到。在调用访问器属性的获取函数(getter)时,Receiver将被用作this值。

OrdinaryGet在(3.c)递归期间始终如一地传递最初的Receiver,不作修改。下面我们来看看这个Receiver是从哪里来的!

通过搜索调用[[Get]]方法的地方,我们发现一个抽象操作GetValue,它操作的是一个引用。引用是一种规范类型,包含一个基础值(base value)、一个引用名(referenced name)和一个严格引用标志(strict reference flag)。对于o2.foo来讲,基础值是对象o2,引用名是字符串"foo",而严格引用标志是false(因为示例代码未启用严格模式)。

扩展学习:为什么是引用而不是记录?

引用不是记录,尽管它可以是记录。引用由3部分组成,可以对等地用3个命名字段来表示。引用不是记录属于历史遗留问题。

说回GetValue

下面看看GetValue的定义:

GetValue ( V )

  1. ReturnIfAbrupt(V)
  2. Type(V)非引用,返回V
  3. baseGetBase(V)
  4. IsUnresolvableReference(V)true,抛出ReferenceError异常;
  5. IsPropertyReference(V)true,则 a. 若HasPrimitiveBase(V)true,则 i. 断言:此时,base决非undefinednull; ii. 设base! ToObject(base); b. 返回? base.[[Get]](GetReferencedName(V), GetThisValue(V))
  6. 否则 a. 断言base为环境记录; b. 返回? base.GetBindingValue(GetReferencedName(V), IsStrictReference(V))

我们例子中的引用是o2.foo,是个属性引用。因此,进入第5步。但不会进5.a,因为base不是原始值(Number、String、Symbol、BigInt、Boolean、Undefined或Null)。

然后在5.b调用[[Get]],而Receiver是通过GetThisValue(V)传入的。这里,它就是引用的基础值。

GetThisValue( V )

  1. 断言:IsPropertyReference(V)true
  2. IsSuperReference(V)true,则 a. 返回引用VthisValue组件的值;
  3. 返回GetBase(V)

o2.foo而言,不会进入第2步,因为它不是一个超类(super)引用(如super.foo),而会进入第3步并返回引用的基础值o2

综上所述,Receiver就是原始引用的基础值,这个值在原型链走查过程中保持不变。如果要找的是一个访问器属性,则在调用获取访问器时以这个Receiver作为this值。

注意,获取函数中的this值引用的是我们想从中获取属性的原始对象,而不是在原型走查时从中找到属性的对象。

看个例子就明白了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const o1 = { x: 10, get foo() { return this.x; } };
const o2 = { x: 50 };
Object.setPrototypeOf(o2, o1);
o2.foo; // → 50

这里通过定义获取函数定义了一个访问器属性foo。获取函数返回this.x

然后,访问o2.foo。你觉得这个获取函数会返回哪个值?

我们发现,调用获取函数时,this值是我们最初尝试从中获取属性的对象,而不是从中找到这个属性的对象。具体说,就是this值是o2,不是o1。可以从返回的是o2.x还是o1.x来判断:返回的是o2.x

我们通过阅读规范就可以预测这段代码的行为!

访问属性时为什么调用[[Get]]

规范哪里说在访问属性(如o2.foo)时要调用对象的内部方法[[Get]]了?没错,一定在哪个地方规定了。不要别人说什么就信什么!

我们发现对象内部方法[[Get]]是在抽象操作GetValue中调用的,而GetValue操作的是引用。那又是哪里调用的GetValue呢?

MemberExpression的运行时语义

规范的文法规则定义了语言的语法。运行时语义定义了语法构造的“含义”(如何在运行时对它们求值)。

如果你不熟悉上下文无关文法,那现在应该点开链接去了解一下。

本文后面将深入研究相关文法规则,现在先保持简单。比如,可以忽略产生式中的下标(YieldAwait,等等)。

下面的产生式(production)描述了MemberExpression

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
MemberExpression :
  PrimaryExpression
  MemberExpression [ Expression ]
  MemberExpression . IdentifierName
  MemberExpression TemplateLiteral
  SuperProperty
  MetaProperty
  new MemberExpression Arguments

这里有7个MemberExpression的产生式。意思是,MemberExpression可以只是一个PrimaryExpression。此外,MemberExpression也可以构建于另一个MemberExpressionExpression的组合:MemberExpression [ Expression ],如o2['foo']。或者,也可以表现为MemberExpression . IdentifierName,如o2.foo(这是与我们例子相关的产生式)。

产生式MemberExpression: MemberExpression . IdentifierName的运行时语义定义了对它求值时的步骤:

运行时语义:求值MemberExpression : MemberExpression . IdentifierName

  1. baseReference为求值MemberExpression的结果;
  2. baseValue? GetValue(baseReference)
  3. MemberExpression匹配的代码为严格模式代码,令stricttrue;否则令strictfalse
  4. 返回? EvaluatePropertyAccessWithIdentifierKey(baseValue, IdentifierName, strict)

这个算法委托给了抽象操作EvaluatePropertyAccessWithIdentifierKey,因此也要看它的定义:

EvaluatePropertyAccessWithIdentifierKey( baseValue, identifierName, strict ) 抽象操作EvaluatePropertyAccessWithIdentifierKey接收值baseValue、解析结点(Parse Node)identifierName和布尔值strict作为参数,执行以下步骤:

  1. 断言:identifierNameIdentifierName
  2. bv? RequireObjectCoercible(baseValue)
  3. propertyNameStringidentifierNameStringValue
  4. 返回一个引用,其基础值为bv、引用名为propertyNameString、严格引用标志为strict

换句话说,EvaluatePropertyAccessWithIdentifierKey构建了一个引用,以提供的baseValue作为基础,以identifierName作为属性名,以strict作为严格模式标志。

最终这个引用被传给了GetValue。规范中调用GetValue的地方有好几处,区别在于最后怎么使用这个引用。


译者附图

上面算法第2步调用? GetValue(baseReference)直接返回突然完成([[Type]]"return"[[Value]]desc.[[Value]],然后由运行时语义解包。)


MemberExpression作为参数

实际代码中还可能把属性访问作为参数:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(o2.foo);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
此时,相关行为由ArgumentList产生式的运行时语义来定义,这个产生式对参数调用了GetValue:

Runtime Semantics: ArgumentListEvaluation ArgumentList : AssignmentExpression

  1. ref为求值AssignmentExpression的结果;
  2. arg? GetValue(ref)
  3. 返回只含一项arg的列表。

o2.foo看起来不像AssignmentExpression(赋值表达式),但它是,所以才适用这个产生式。要知道为什么,可以看看补充说明:“为什么o2.fooAssignmentExpression?”。

第1步中的AssignmentExpressiono2.foo。而求值o2.foo得到的结果ref就是上面提到的引用。第2步在这个引用上调用了GetValue。这样我们就知道了对象的内部方法[[Get]]会被调用,而原型走查也会发生。

小结

本文探讨了规范如何定义语言特性,也就是原型查找,跨越了不同的抽象层,包括触发该特性的语法结构和定义它的算法。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端时空 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
理解 ECMAScript 规范(1)
让我们从一个具体的例子开始,然后通过规范去理解它。下面的代码演示了Object.prototype.hasOwnProperty的用法:
前端老王
2020/09/23
5930
理解 ECMAScript 规范(1)
理解 ECMAScript 规范(一)
在这篇文章中,为我们将会使用规范中的一个小的功能来做为切入点,从中去尝试理解一些特殊操作符,让我们开始吧。
三毛
2020/03/05
5970
了解ECMAScript规范,第1部分
即便你对 JavaScript 很了解,但是去阅读 ECMAScript 语言规范,或简称为 ECMAScript 规范(https://tc39.es/ecma262/)也会令人生畏。至少这是我在第一次开始阅读时的感受。
疯狂的技术宅
2020/02/26
8190
了解ECMAScript规范,第1部分
细说Js中的this
输出的结果很明显,对于call的用法前面文章有提到,第一个参数就是传入到函数里的this的值。这段代码可以在不同的上下文对象( me 和 you )中重复使用函数 identify() 和 speak() ,如果我们不适用this的话,那就需要identity和speak显示传入一个上下文对象,就像下面的方式
hellocoder2029
2022/10/17
4.4K0
学习一下JavaScript
学习一下JavaScript tanger 发布于:2021年4月11日 更新于:2021年5月26日 次浏览 字数:12.6k字 时长:49分钟
Tanger
2021/06/15
4170
学习一下JavaScript
ECMA-262-3深入解析第七章:2、OOP ECMAScript 实现
从来没有深入了解ECMA,网上找了一下,发现早在2010年就有大佬 Dmitry Soshnikov 总结了ECMA中的核心内容,我这里只是翻译记录,加深自己的印象。文章原文来自 ECMA-262-3 in detail. Chapter 7.2. OOP: ECMAScript implementation.
踏浪
2021/06/09
6140
读懂 ECMAScript 规格
一般来说,没有必要阅读规格,除非你要写编译器。因为规格写得非常抽象和精炼,又缺乏实例,不容易理解,而且对于解决实际的应用问题,帮助不大。但是,如果你遇到疑难的语法问题,实在找不到答案,这时可以去查看规格文件,了解语言标准是怎么说的。规格是解决问题的“最后一招”。 这对 JavaScript 语言很有必要。因为它的使用场景复杂,语法规则不统一,例外很多,各种运行环境的行为不一致,导致奇怪的语法问题层出不穷,任何语法书都不可能囊括所有情况。查看规格,不失为一种解决语法问题的最可靠、最权威的终极方法。
小小杰啊
2022/12/21
6980
ECMAScript 6 特性ECMAScript 6 特性
ECMAScript 6,也被称做ECMAScript 2015,是ECMAScript标准的下一个版本。这个标准预计将于2015年6月被正式批准。ES6是这门语言的一次重大更新,自ES5以来,该语言的首次更新是在2009年。主流Javascript引擎对ES6相关特性的实现也正在进行中。
用户2936342
2018/08/27
6300
深入理解 JavaScript Prototype 污染攻击
本来是想发在代码审计知识星球里的一篇科普文章,因为最近知识星球似乎在和神秘组织对接,无法发表内容,所以发在博客里。Code-Breaking官方writeup拖了很久,主要是没时间,不过外面已经有很多同学的writeup了,所以问题不大。
phith0n
2023/10/28
2790
深入理解 JavaScript Prototype 污染攻击
你不知道的 WeakMap
相信很多读者对 ES6 引入的 Map 已经不陌生了,其中的一部分读者可能也听说过 WeakMap。既生 Map 何生 WeakMap?带着这个问题,本文将围绕以下几个方面的内容为你详细介绍 WeakMap 的相关知识。
阿宝哥
2020/05/27
1.3K0
从ECMAscript标准文档看懂valueOf
P.S.最近在看dayjs的源码,源码上用到了 valueOf 方法,虽然知道这个方法,但是很少接触,就试着找来了ECMAscript标准文档来看看标准的定义。
用户1515472
2019/07/25
8140
从ECMAscript标准文档看懂valueOf
Ecmascript 6
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
海仔
2021/05/11
4890
读懂 ECMAScript 规格
一、概述 规格文件(specification)是计算机语言的官方标准,详细描述语法规则和实现方法。 一般来说,没有必要阅读规格,除非你要写编译器。因为规格写得非常抽象和精炼,又缺乏实例,不容易理解,
ruanyf
2018/04/12
8770
读懂 ECMAScript 规格
面向 JavaScript 开发人员的 ECMAScript 6 指南(3):JavaScript 中的类
在 第 2 部分 中,您学习了 ECMAScript 6 中的函数增强,包括新的箭头和生成器函数。将函数元素集成到 JavaScript 代码中意味着要重新考虑某些因素,但变化没有您想象的那么大。事实上,在多年来提出的所有变化中,ECMAScript 6 中最有争议的新元素或许就是面向对象的元素。
疯狂的技术宅
2019/03/28
6900
【翻译】ECMAScript装饰器的简单指南
简要介绍JavaScript中的“装饰器”的提案的一些基础示例以及ECMAScript相关的内容
腾讯IVWEB团队
2020/06/28
7140
ECMAScript 6笔记(Symbol, Proxy 和 Reflect)
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51378330
空空云
2018/09/27
5060
ECMAScript 各个主要版本的关键特性概述
ECMAScript 是 JavaScript 的标准规范,各个版本的 ECMAScript 引入了许多新特性和改进。以下是 ECMAScript 各个主要版本的关键特性概述:
jack.yang
2025/04/05
410
ECMAScript 6 笔记(一)
       1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。
超然
2018/08/03
1K0
大话 JavaScript(Speaking JavaScript):第十六章到第二十章
您在不运行程序的情况下检查程序的存在。给定以下代码,我们可以得出静态断言,即函数“g”嵌套在函数“f”内部:
ApacheCN_飞龙
2024/01/12
4570
大话 JavaScript(Speaking JavaScript):第十六章到第二十章
ECMA-262-3 详解:3、This
从来没有深入了解ECMA,网上找了一下,发现早在2010年就有大佬 Dmitry Soshnikov 总结了ECMA中的核心内容,我这里只是翻译记录,加深自己的印象。文章原文来自 ECMA-262-3 in detail. Chapter 3. This.
踏浪
2020/06/29
5210
相关推荐
理解 ECMAScript 规范(1)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验