重学js —— Scripts

[lizhongzhen11]

Scripts

• MDN

<script>
var a;
let b;
const c = 'c';
// ...
</script>

Script Records

脚本记录封装了有关正在求值的脚本信息。脚本记录包含 下表 字段

字段名	值类型	含义
[[Realm]]	领域记录 / undefined	创建此脚本的 领域。如果未赋值的话，那么就是 undefined
[[Environment]]	词法环境 / undefined	包含此脚本顶级绑定的 词法环境。当脚本实例化时会对该字段赋值。
[[ECMAScriptCode]]	一个 解析节点	使用 Script 作为 目标符号 解析该脚本其 源文本 结果。
[[HostDefined]]	任何都行，默认值是 undefined	保留给需要将其他信息与脚本关联的主机环境使用的字段。

ParseScript ( sourceText, realm, hostDefined )

基于将 sourceText 解析为 Script 的结果创建脚本记录。

1. 断言：sourceText 是ECMAScript 源文本
2. 使用 Script 作为 目标符号 解析 sourceText 并且分析任何早期错误条件的解析结果。如果解析成功且没发现早期错误，定义 body 为解析树的结果。否则，定义 body 为一个或多个 SyntaxError 对象的 List，这些对象表示解析错误和/或早期错误。解析和 早期错误 检测可以以依赖于实现的方式进行交织。如果存在多个解析错误和 早期错误，list中错误对象的数量和顺序与实现有关，但至少存在一个。
3. 如果 body 是错误 List，返回 body
4. 返回脚本记录 { [[Realm]]: realm, [[Environment]]: undefined, [[ECMAScriptCode]]: body, [[HostDefined]]: hostDefined }

ScriptEvaluation ( scriptRecord )

1. 定义 globalEnv 为 scriptRecord.[[Realm]].[[GlobalEnv]]
2. 定义 scriptContext 为一个新的ECMAScript代码 执行上下文
3. 将 scriptContext 的 Function 赋值为 null
4. 将 scriptContext 的 Realm 设为 scriptRecord.[[Realm]]
5. 将 scriptContext 的 ScriptOrModule 设为 scriptRecord
6. 将 scriptContext 的 VariableEnvironment 设为 globalEnv
7. 将 scriptContext 的 LexicalEnvironment 设为 globalEnv
8. 暂停 当前的 运行时执行上下文
9. 将 scriptContext push到 执行上下文栈 顶；scriptContext 现在是 运行时执行上下文 了
10. 定义 scriptBody 为 scriptRecord.[[ECMAScriptCode]]
11. 定义 result 为 GlobalDeclarationInstantiation(scriptBody, globalEnv)
12. 如果 result.[[Type]] 为 normal，
    1. 将 result 设为 scriptBody 的求值结果
13. 如果 result.[[Type]] 为 normal 且 result.[[Value]] 为 empty，
    1. 将 result 设为 NormalCompletion(undefined)
14. 暂停 scriptContext 且将其从 执行上下文栈 中移除
15. 断言：执行上下文栈 不为空
16. 将 执行上下文栈 顶的上下文恢复为 运行时执行上下文
17. 返回 Completion(result)

GlobalDeclarationInstantiation ( script, env )

当为了求值脚本而建立 执行上下文 时，当前 全局环境 下的声明会实例化。代码中声明的每个全局绑定都被实例化。

参数 script 是正在建立的 执行上下文 的 ScriptBody。env 是将要在其中创建绑定的全局词法环境。

1. 定义 envRec 为 env 的 环境记录
2. 断言：envRec 是 全局环境记录
3. 定义 lexNames 为 script 的 LexicallyDeclaredNames
4. 定义 varNames 为 script 的 VarDeclaredNames
5. 遍历 lexNames 中的每个 name，（PS：这里指用 let 和 const 声明的变量名，如果环境中已经有相同的变量名，那么抛异常）
   1. 如果 envRec.HasVarDeclaration(name) 为 true，抛 SyntaxError 异常
   2. 如果 envRec.HasLexicalDeclaration(name) 为 true，抛 SyntaxError 异常
   3. 定义 hasRestrictedGlobal 为 ? envRec.HasRestrictedGlobalProperty(name)
   4. 如果 hasRestrictedGlobal 为 true，抛 SyntaxError 异常
6. 遍历 varNames 中的每个 name，（PS：这里特指用 var 声明的变量名）
   1. 如果 envRec.HasLexicalDeclaration(name) 为 true，抛 SyntaxError 异常
7. 定义 varDeclarations 为 script 的 VarScopedDeclarations
8. 定义 functionsToInitialize 为一个新的空 List
9. 定义 declaredFunctionNames 为一个新的空 List
10. 遍历 varDeclarations 中的每个元素 d（别名），倒序排列，
    1. 如果 d 既不是 VariableDeclaration 又不是 ForBinding 更不是 BindingIdentifier，
       1. 断言：d 是 FunctionDeclaration，GeneratorDeclaration，AsyncFunctionDeclaration 或 AsyncGeneratorDeclaration 中的一种
       2. 注意：如果存在多个相同名字的函数声明，会使用最后一个声明
       3. 定义 fn 为 d 的 BoundNames 唯一元素
       4. 如果 fn 不是 declaredFunctionNames 中的元素，
          1. 定义 fnDefinable 为 ? envRec.CanDeclareGlobalFunction(fn)
          2. 如果 fnDefinable 为 false，抛 SyntaxError 异常
          3. 将 fn 加入到 declaredFunctionNames 中
          4. 插入 d 作为 functionsToInitialize 第一个元素
11. 定义 declaredVarNames 为一个新的空 List
12. 遍历 varDeclarations 中的每个元素 d（别名），
    1. 如果 d 是 VariableDeclaration，ForBinding 或 BindingIdentifier 中的一种，
       1. 遍历 d 的 BoundNames 中每个字符串 vn，
          1. 如果 vn 不是 declaredFunctionNames 中的元素，
             1. 定义 vnDefinable 为 ? envRec.CanDeclareGlobalVar(vn)
             2. 如果 vnDefinable 是 false，抛 SyntaxError 异常
             3. 如果 vn 不是 declaredVarNames 中的元素，
                1. 把 vn 添加进 declaredVarNames 中
13. 注意：如果 全局对象 是 普通对象，则在此算法步骤之后不会发生异常终止。但是，如果全局对象 是 Proxy怪异对象，在以下某些步骤中，它可能表现出导致异常终止的行为。
14. 注意：附件 B.3.3.2 在此处增加了额外的步骤
15. 定义 lexDeclarations 为 script 的 LexicallyScopedDeclarations
16. 遍历 lexDeclarations 中每个元素 d，
    1. 注意：词法声明变量仅在此处实例化但不会初始化
    2. 遍历 d 的 BoundNames 中每个元素 dn，
       1. 如果 d 是 const 声明，
          1. 执行 ? envRec.CreateImmutableBinding(dn, true)
       2. 否则，
          1. 执行 ? envRec.CreateMutableBinding(dn, false)
17. 遍历 functionsToInitialize 中的每个 解析节点 f，
    1. 定义 fn 为 f 的 BoundNames 唯一元素
    2. 定义 fo 为 f 的 InstantiateFunctionObject，参数为 env
    3. 执行 ? envRec.CreateGlobalFunctionBinding(fn, fo, false)
18. 按顺序遍历 declaredVarNames 中每个字符串 vn，
    1. 执行 ? envRec.CreateGlobalVarBinding(vn, false)
19. 返回 NormalCompletion(empty)

与显式 var 或函数声明不同，直接在全局对象上创建的属性会导致全局绑定，而这些绑定可能会被 let / const / class 声明遮盖。

2020-07-16 补充

如何在 <script></script> 标签中使用 import/export ？

<script type="module">
export const test = 'test'
</script>

见 winter 《重学前端》中 在script标签写export为什么会抛错？ 一章。

2020-07-18 补充

今天看 《JavaScript 20 年》中文版 时突然意识到初入门时就知道但目前差点忘了的知识 —— HTML 网页都可能包含多个 <script> 元素。脚本之间通常共享同一个全局对象。由脚本创建的全局变量和函数，对所有后续脚本均可见。

<script>
  var a = 1;
</script>
<script>
  console.log(a); // 1
</script>

我都差点忘了这回事了。。。