--- highlight: a11y-dark theme: juejin --- ## 前言 ECMAScript标准是深入学习JavaScript原理最好的资料，没有其二。通过增加对ECMAScript语言的理解，理解javascript现象后面的逻辑，提升个人编码能力。欢迎关注和订阅专栏 [重学前端-ECMAScript协议上篇](https://juejin.cn/column/7496484123247902757) ## 代码开篇本文以下列代码为例： ```javascript function test(paramA, paramB){ "use strict" var varA = "varA"; let letA = "letA"; function fn(){ console.log("i am a function"); } console.log(paramA, paramB, letC, fn); } test("paramA","paramB"); ``` ## 知识准备 ### 简单参数 [IsSimpleParameterList](https://tc39.es/ecma262/#sec-static-semantics-issimpleparameterlist) 是不是简单参数。协议内容罗列了一大堆，简单归纳就是参数没有如下行为： - 参数默认值 - 解构 - 剩余参数在特异对象的章节有涉及到：如果是**严格模式**或者**非简单参数**模式，是不会和形参进行联动变化的。联动变化和不联动变化: ```javascript // 不联动变化, 非简单参数 function func(a = 55) { a = 99; console.log(arguments[0], a); } func(10); // 10 99 // 联动变化 function func2(a) { a = 99; console.log(arguments[0], a); } func2(10); // 99 99 ``` **函数严格模式下，参数默认值，解构，剩余参数等行为，均会报错。** **`原因，函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，是先评估函数参数，然后再执行函数体，这样不合理的地方就是只有从函数体之中，才能知道参数是否应该以严格模式执行，这就已经晚了。`** ```javascript // 默认参数 function fn1(paramA, paramB = a) { 'use strict' // ......code } // 解构 function fn2({propertyA, propertyB}) { 'use strict' // ......code } // 剩余参数 const fn3 = (...rest) => { 'use strict' // ......code } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fb770b0b45548eeb31da2cc096b6a0c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1004&h=480&s=43282&e=png&b=fffcfc) ### 参数包含表达式 [ContainsExpression of formals](https://tc39.es/ecma262/#sec-static-semantics-containsexpression) 你要是语法向的协议描述，难搞。主要是两种行为 - 有赋值 - 有计算属性 ```javascript // 默认值, 有赋值行为 function test(a = 1){ console.log(a); } function test({a = 1}){ console.log(a); } function test(a = (ccc=100)){ console.log(a); } // 计算属性 var a = "a"; function test({ [a]: b }) { console.log(b); } function test({ [(ccc='a')]:b }){ console.log(b); } test({a:100}) ``` 这里就有点有意思的推断了，还记得简单参数吗 - 无默认值 - 无解构 - 无剩余参数而参数包含表达式的条件，稍作调整 - 有赋值 - 有计算属性（解构时会出现）而计算属性什么情况下会出现呢？解构，对象解构和数组解构，均可能出现。所以有下面的推断 - **参数包含表达式一定不是简单参数** ### [[ThisMode]] 定义如何在函数的形式参数和代码体中解释this引用。协议描述参见 [Internal Slots of ECMAScript Function Objects](https://tc39.es/ecma262/multipage/ordinary-and-exotic-objects-behaviours.html#sec-ecmascript-function-objects)的表格。 | [[ThisMode]] | lexical | 当前函数为箭头函，函数没有自己的this。 | | -------------- | ------- | ---------------------------------------------------------- | | | strict | 严格模式。完全按照函数调用所提供的方式使用，不会对this进行包装或者改变。 | | | global | 值为 global 意味着当 null 或者 undefined 为 this 绑定值时会被解析为对全局对象的引用。 | 不管模式咋样，执行上下文都是通过 [ResolveThisBinding ](https://tc39.es/ecma262/#sec-resolvethisbinding)从环境记录中取获取 this的值，更多细节单独的文章老说。 ## 流程回顾再回顾一下上一节提到的大体流程 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfb57ccab1a84877b499cecf1c25002f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1735&h=644&s=99753&e=png&b=ffffff) 接着上个章节，说今天的主角 `[[Call]]` ## [[Call]] 是什么 `[[Call]]`是协议内部方法，来识别是不是可以被调用，即函数。在协议内部主要有两个提到 - [10.2.1 [[Call]] ( thisArgument, argumentsList )](https://tc39.es/ecma262/#sec-ecmascript-function-objects-call-thisargument-argumentslist) - [10.3.1 [[Call]] ( thisArgument, argumentsList )](https://tc39.es/ecma262/#sec-built-in-function-objects-call-thisargument-argumentslist) 10.2.1 可以认为是开发者编写的函数调用逻辑， 10.3.1 是内置函数的调用。大家都知道函数也是对象。怎么区别函数和对象的呢，和这个 `[[Call]]`大有关系。 Function也是Object, 协议内部是怎么区分的呢？很简单, 如果Object内部方法 `[[Call]]`，那么就是函数。协议内部对应有个方法叫做 [IsCallable ](https://tc39.es/ecma262/#sec-iscallable)，通常用来识别是不是可以被调用，即函数。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f59a2967e7844a65bad17b2bc6e16574~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2053&h=476&s=75870&e=png&b=ffffff) 系统内置的函数，程序员编写的函数，以及前面两个章节的 <<[Bound Function Exotic Objects](https://tc39.es/ecma262/multipage/ordinary-and-exotic-objects-behaviours.html#sec-bound-function-exotic-objects)>> 提到的绑定函数特异对象，均是如此。 ## [[Call]] 流程简析借用上章节的图，`[[Call]]`对应流程图红色圈出的部分的逻辑 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20daf404c5ee4938ab4e126b989d5767~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1748&h=627&s=106111&e=png&b=ffffff) 结合流程图，再一起分析流程。 [[[Call]] ( thisArgument, argumentsList )](https://tc39.es/ecma262/#sec-ecmascript-function-objects-call-thisargument-argumentslist) - [PrepareForOrdinaryCall ( F, newTarget )](https://tc39.es/ecma262/#sec-prepareforordinarycall) 切换上下文，初始化环境记录：词法环境记录，变量环境记录，私有环境记录等 - [OrdinaryCallBindThis ( F, calleeContext, thisArgument )](https://tc39.es/ecma262/#sec-ordinarycallbindthis) 根据调用函数的`[[ThisMode]]`, 给函数环境记录绑定this的值等 - [OrdinaryCallEvaluateBody ( F, argumentsList )](https://tc39.es/ecma262/#sec-ordinarycallevaluatebody) 评估并调用函数体 - [EvaluateFunctionBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluatebody) 这里会根据函数的类型不同，走不通的逻辑。主要分为普通函数，箭头函数，生成器函数，异步生成器函数，异步函数，异步箭头函数底层都会调用`FunctionDeclarationInstantiation`的函数，进行申明实例化操作。 - [**FunctionDeclarationInstantiation ( func, argumentsList )**](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) 函数申明实例化。 - [Evaluation](https://tc39.es/ecma262/#sec-evaluation) of [FunctionStatementList](https://tc39.es/ecma262/#prod-FunctionStatementList) 执行函数语句列表。 - [ReturnIfAbrupt](https://tc39.es/ecma262/#sec-returnifabrupt) 返回结果或者抛出异常。 ### [[[Call]] ( thisArgument, argumentsList )](https://tc39.es/ecma262/#sec-ecmascript-function-objects-call-thisargument-argumentslist) - 新建执行上下文，环境记录：词法环境和变量环境，之后会被替换掉。 - 根据调用函数的`[[ThisMode]]`, 给函数环境记录绑定this的值。 - 函数调用，底层调用 [OrdinaryCallEvaluateBody ( F, argumentsList )](https://tc39.es/ecma262/#sec-ordinarycallevaluatebody) - 恢复上下文 - 返回结果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/092ff138568248ca8cfc031aa5991586~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=871&h=496&s=81639&e=png&b=fefdfd) ### [PrepareForOrdinaryCall ( F, newTarget )](https://tc39.es/ecma262/#sec-prepareforordinarycall) - 新建代码执行上下文，并进行一些设置 - 初始化默认的环境记录，后期会被更改 **上下文的词法环境记录和变量环境记录的初始化都是函数环境记录** - 新上下文入栈，并且作为当前执行山上下文![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51475286e8394747b8635f51142bd741~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1103&h=640&s=135196&e=png&b=fffefe) ### [OrdinaryCallBindThis ( F, calleeContext, thisArgument )](https://tc39.es/ecma262/#sec-ordinarycallbindthis) 更多的细节在 <<函数的this之路>> 章节。根据函数的内置属性`[[ThisMode]]` 和传入的 `thisArgument`来设置环境记录的`[[ThisValue]]`, **也就是后面函数调用的 this。** 详情可以看带标注的下图 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6c63ff812824e11a7ecde8c34020645~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=964&h=626&s=100099&e=png&b=fffefe) 这里是在环境记录上绑定 this 的值，函数体语句执行时，如果用到this，当前上下文会负责获取会通过 [ResolveThisBinding ( )](https://tc39.es/ecma262/#sec-resolvethisbinding) 函数调用时`this`的值，其逻辑为： 1. 通过 [GetThisEnvironment ( )](https://tc39.es/ecma262/#sec-getthisenvironment) 获取具有有效 `this` 的环境记录 env。这个过程会一直往上层的环境记录查找，当然最后的环境记录就是全局环境记录，其一定有 `this`。 1. 再通过环境记录 env.GetThisBinding() 方法获取 this 的值。因环境记录类型不一样，逻辑也会不一样。 - 函数环境记录[ GetThisBinding ( )](https://tc39.es/ecma262/#sec-function-environment-records-getthisbinding) 是直接读取内置属性 `[[ThisValue]]` - 全局环境记录 [GetThisBinding ( )](https://tc39.es/ecma262/#sec-global-environment-records-getthisbinding) 直接读取内置属性 `[[GlobalThisValue]]`, 也就是常说的全局对象。 ### [OrdinaryCallEvaluateBody ( F, argumentsList )](https://tc39.es/ecma262/#sec-ordinarycallevaluatebody) 不同类型的函数的函数体走的逻辑是不一样的 | 函数类型 | 逻辑方法 | | ------- | ------------------------------------------------------------------------------------------------------- | | 普通函数 | [EvaluateFunctionBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluatefunctionbody) | | 箭头函数 | [EvaluateConciseBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluateconcisebody) | | 生成器函数 | [EvaluateGeneratorBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluategeneratorbody) | | 异步生成器函数 | [EvaluateAsyncGeneratorBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluateasyncgeneratorbody) | | 异步函数 | [EvaluateAsyncFunctionBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluateasyncfunctionbody) | | 异步箭头函数 | [EvaluateAsyncConciseBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluateasyncconcisebody) | 当然，本示例比较属于普通函数，走的是 [EvaluateFunctionBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluatefunctionbody)。不管是那种函数的函数体，其底层都会调用 [FunctionDeclarationInstantiation ( func, argumentsList )](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) 进行函数申明实例化，在之后在进行不同的定制化的操作。 [EvaluateFunctionBody](https://tc39.es/ecma262/#sec-runtime-semantics-evaluatefunctionbody) 逻辑很简单，所谓的字数越少，事情越大，下面每一行都是非常复杂的行为。当然都可以简单的概括总结。 1. 函数申明实例化 2. 评估执行函数体的语句 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f885b453135b4c52a3c01b0410485e6f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=685&h=174&s=20301&e=png&b=fffefe) ### [FunctionDeclarationInstantiation ( func, argumentsList )](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) 函数申明实例化，这是重中之重！！！！！！！！！！！！！！！！！！！！！。整个过程有兴趣的同学可以好好看看，如果看着头疼，没关系, 了解一下下图的内容，就可以跳过本小节，**重点是后面的场景分析**。简单说做了如下的操作操作（不表示按照顺序） ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c14861d2b4e947969fc6a5730cb7ce91~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=309&h=468&s=21161&e=png&b=9ac7bf) 其主要作用就是按需创建环境记录，按需创建`arguments`对象，在环境记录上创建绑定关系，函数实例化等。 1. 实例化各种内部用的变量 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07358d46fcd24c79a25371724fe10859~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=999&h=422&s=86334&e=png&b=fffdfd) 2. 遍历var申明解析节点，对其中的函数申明节点做处理。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d67aa90ccc04b3d8ffb0f06dc1bf7a0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1101&h=338&s=78273&e=png&b=fffefe) 3. 判断是不是需要创建 `arguments`对象 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/952bf4e5608343fa8ef59414040253f3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1000&h=318&s=72249&e=png&b=fffdfd) 4. 根据严格模式和是否有参数表达式，确定是否新建申明环境记录。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e95be492c3954c99a0fdb58f6a13dc5c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1100&h=372&s=83331&e=png&b=fffefe) 5. 在环境记录上创建**形参的绑定关系** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d6dc69a7f7045cb8aa0f6dd6df8d7c9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1094&h=283&s=62593&e=png&b=fffefe) 6. 按需初始化 `arguments` 对象 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad8ad0b38d1d4012ab842d61e01c5e9c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1103&h=571&s=136897&e=png&b=fffdfd) 7. 给函数参数对应的绑定关系初始化（赋值） ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40d105893f2e420193bf0556b6d22021~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1070&h=180&s=42031&e=png&b=fffdfd) 左边是执行前，右边是执行后 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf7c9bddc10649a79d08096a3d3a31d7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=356&h=609&s=26047&e=png&b=272728)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad5a4608bedf4d5daafa70b1a71f2466~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=378&h=625&s=29247&e=png&b=262627) 8. 函数如果没有参数表达式的情况，在环境记录上实例化 var申明 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c03d209870b40e6af44a4a17e049eec~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=960&h=250&s=39779&e=png&b=fffdfd) 9. 如果有参数表达式，新建环境记录 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c480cac9776f480387fd12c62f8c654b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1134&h=431&s=67277&e=png&b=fffefe) 10. 按需创建新的函数申明环境。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/269a3bcae0f842d2bbac940d9ee5ca07~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1035&h=220&s=53046&e=png&b=fffdfd) 创建绑定关系（实例化）和初始化是两个操作。 [CreateMutableBinding ( N, D )](https://tc39.es/ecma262/#sec-declarative-environment-records-createmutablebinding-n-d) 只是实例化，其状态为`uninitialized`。[InitializeBinding ( N, V )](https://tc39.es/ecma262/#sec-declarative-environment-records-initializebinding-n-v) 初始化，可以设置值，状态转为`initialized` 11. 根据词法申明的解析节点，在**词法环境记录**上创建绑定关系 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65b9c18b64b74d4ab6096e720ffa35fd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=956&h=252&s=41492&e=png&b=fffefe) 12. 设置私有环境记录，实例化函数对象以及在变量环境记录中创建函数绑定关系。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d90aff8b5b54170ac19122e8b285b5f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=780&h=174&s=31318&e=png&b=fffdfd) ### [Evaluation](https://tc39.es/ecma262/#sec-evaluation) of [FunctionStatementList](https://tc39.es/ecma262/#prod-FunctionStatementList) 这个就是每个语句进行解析执行。略过。 ## 函数申明实例化究竟创建了几个环境记录（重点，重点，重点）函数申明实例化[FunctionDeclarationInstantiation ( func, argumentsList )](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) 过程，有几处新建了申明环境记录，并有多处进行绑定，如果纯从文字上去理解，虽然有些地方有Note, 依然非常，非常，非常难于理解。在 [PrepareForOrdinaryCall ( F, newTarget )](https://tc39.es/ecma262/#sec-prepareforordinarycall) 的时候创建了一个函数环境记录，本例的函数`test`是在全局代码下创建的，所以函数环境记录的外部环境是全局环境。 ```javascript function test(paramA, paramB){ "use strict" var varA = "varA"; let letA = "letA"; function fn(){ console.log("i am a function"); } console.log(paramA, paramB, letC, fn); } test("paramA","paramB"); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70e46674e360480e91e5fbe91af23e08~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=653&h=115&s=21891&e=png&b=fefcfc) 此时的环境记录如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95370332303e43fcb0626146268a0cc0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=682&h=420&s=14029&e=png&b=fdf4f4) [FunctionDeclarationInstantiation ( func, argumentsList )](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) 函数申明实例化的过程会根据一定条件新建环境记录： 1. 步骤20时，如果非严格模式 + 有函数参数表达式新建申明环境记录作为上下文的 LexicalEnvironment,`[[OuterEnv]]`为上下文旧的 LexicalEnvironment 2. 步骤28，如果有函数参数表达式新建申明环境记录作为上下文的 VariableEnvironment, `[[OuterEnv]]`为上下文旧的 LexicalEnvironment 3. 步骤30 ，如果非严格模式新建申明环境记录作为上下文的 LexicalEnvironment `[[OuterEnv]]`为上下文旧的 VariableEnvironment 所以呢？ **除了函数环境记录本身外，还可能创建 0 - 3，确切的是0，1或者3 个申明环境记录**，至于为什么要创建新的环境记录，挨个进行分析。 ## 场景分析从协议上看，新建环境记录的情况如下: - 非严格模式 + 有参数表达式环境记录 +1 步骤20 - 有参数表达式环境记录 + 1 步骤28 - 非严格模式环境记录 +1 步骤30 如果按照非严格模式和有参数表达式两个条件，实际可以组合四种场景 | 序号 | 非严格模式 | 有参数表达式 | 实际新建申明环境记录数量 | | -- | ------- | ------ | ------------- | | 1 | ✔️ | ✔️ | 1 + 1 + 1 = 3 | | 2 | ❌ 即严格模式 | ✔️ | 不存此情况 | | 3 | ✔️ | ❌ | 1 | | 4 | ❌ 即严格模式 | ❌ | 0 | **严格模式只允许简单参数，函数参数如果有表达式（就一定不是简单参数），就一定不是简单参数，所以不会出现2**。 ### 步骤20 why? 非严格模式 + 有参数表达式首先这种场景和函数参数表达式中有 `eval` 有关。 - 函数严格模式不允许有参数表达式，所以只可能出现在非严格模式 - 无参数表达式就不可能有 `eval`调用， eval 出现在参数默认值，计算属性等场景 **函数参数表达式出现** `eval` **的条件就是：非严格模式 + 有参数表达式** 比如下面的代码 eval就会产生新的var申明 `paramC`。 ```javascript function test(paramA = eval("var paramC = 'paramC'"), paramB = paramC){ var varA = "varA"; let letA = "letA"; console.log(paramA, paramB, varA, letA); } test(); // undefined 'paramC' 'varA' 'letA' ``` 接下来就是 eval 的直接调用了，eval的调用比较复杂，就简单说 **非严格模式下的直接调用，** 这种情况下 - eval 被调用时使用的上下文是调用eval函数的执行上下文，即当前执行上下文，不会新建执行上下文 - eval 被调用时 var 申明的变量会绑定到调用eval函数的上下文的环境记录中调用 eval的上下文，就是`test`函数对应的上下文，在函数申明初始化之前，环境记录和词法环境记录都指向函数环境，关系图如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6558f1ac0aa74c8eaffae2102f7e0ef0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=682&h=420&s=14029&e=png&b=fdf4f4) 所以 `eval`生成var申明的绑定关系就会保存到了函数环境记录。 **步骤20也有注释，需要一个独立的上下文来保存形参上因为eval直接调用而产生的绑定关系，并且这个环境应该在形参环境所在环境的外部。** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6586f5bcf46a4f3eabd82b24a25c77f3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1078&h=232&s=45378&e=png&b=fffefe) 在步骤28的时候， - 你会知道形参也会独立保存到一个新的环境记录， - 而形参环境记录其实又可能从形参eval产生变量申明和函数申明所以在环境记录中查找绑定关系的。例如如下函数：b在调用的时候，会从形参eval产生的环境记录中去查找c。所以才会输出结果为8。 ```javascript function t(a = eval('var c = 8'), b = () => c) { console.log(b()) } t() // 8 ``` 环境记录关系如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5788767226ff48458677797ab20a6ae3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1035&h=549&s=66117&e=png&b=fefdfd) **** 所以，简单一句话： **`利用函数环境记录保存eval创建的var申明`**，新建一个申明环境记录去保存函数环境记录原来该保存的申明。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/532f35f715b14b2d981c8a4e68ef38b8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=947&h=370&s=27041&e=png&b=fdf4f4) 是什么时候建立对应的绑定关系呢？实际是在后面的步骤25.56。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c38d2db5a15f47f1868dde9868f65b6f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1053&h=146&s=27425&e=png&b=fffefe) 有兴趣的同学，可以研究一下： ```javascript function t(a = eval('var c = 8'), b = c) { console.log(b) } t() // 8 ``` ### 步骤28 Why? 有参数表达式 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/157f733a7bb044dbb4cafb00186f5190~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1085&h=217&s=37615&e=png&b=fffefe) **`需要一个单独的环境记录，来确保由形式参数列表中的表达式创建的闭包（函数），不能访问函数体中声明。`** 比如下面的代码： ```javascript function foo1(a, b1 = () => c ) { var c = 1 console.log(b()) } foo(2) // ReferenceError: c is not defined function foo2(a, b2 = () => a ) { var c = 1 console.log(b()) } foo(2) // 2 ``` - 闭包（函数）b1 是**不能访问** 函数 foo1 函数体内的变量申明 `c`的 - 闭包（函数）b2 是**可以访问** 函数 foo2 的函数参数 `a` 的为了实现这种隔离，如果 foo1 函数体内的变量申明和 foo1 函数的参数保存在同一个环境，显然是不行的，因此这里才需要一个环境记录来达到这种隔离的目的。 **新建一个申明环境记录来单独保存函数形参数的绑定关系，当** `b1` **执行时，从形参所在的环境记录去查找绑定关系，而不是从 foo1 函数体内部变量申明保存的环境去查找。** **小结：步骤28创建的申明环境记录被用于保存形参的绑定关系，新建一个申明环境记录、** 这一步之后的环境记录关系图如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/877ef60252f1428eb076818b45bf2c4b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1121&h=466&s=36516&e=png&b=fef7f7) ### 步骤30 why ? 非严格模式 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a0581e0a69b4e019079725b4f48a6f5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=237&s=48245&e=png&b=fffefe) **非严格模式的函数用一个单独的环境记录来保存顶级词法申明，因此 eval的直接调用可以确定 eval 代码引入的任何 var 作用域声明是否与预先存在的顶级词法作用域声明冲突。** 举个例子， eval产生的 var 申明 `a` 与函数顶级词法申明 `a` 冲突, 新的环境记录就是用于保存词法申明的。 ```js function test(){ let a = 'letA' eval(`var a = 'varA'`) } test(); // Uncaught SyntaxError: Identifier 'a' has already been declared ``` 这里需要了解的是，词法环境记录和变量环境记录可能是同一个环境记录，比如： - 比如全局**顶层代码**执行时 - 严格模式 + 无函数参数表达式的函数执行时，后面的场景4会提到。所以是因为要用单独的环境记录来保存**顶级词法申明**，注意顶级，因为函数内部可以有多级词法申明, 下面的两个a属于不同level的词法申明。 ```javascript function test(){ let a = 1; // 顶级 { let a = 1 // 非顶级 } } ``` **所以这里新建的的申明环境记录就是用于保存函数顶级词法申明，而步骤28创建申明环境的用于函数内部 var明和函数申明。** 新建申明环境记录之后，关系结构如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/474a74b466344fbba28527eba3af1893~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1081&h=396&s=37495&e=png&b=fdf3f3) 下面的场景示例，不考虑参数表达式中有`eval`的情况。 ### 场景1：非严格模式 + 有函数参数表达式（新建3个环境记录） ```javascript function test(paramA = eval('var evalC = "evalC"')){ var varA = "varA"; let letA = "letA"; function fn(){ console.log("i am a function"); } console.log(paramA, evalC, varA, letA, fn); } test(); // undefined 'evalC' 'varA' 'letA' ƒ fn(){ // console.log("i am a function"); // } ``` 1. 步骤20时，如果非严格模式 + 有函数参数表达式，到步骤28之前环境记录关系如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d1f694604ed4fea9c73e787c8f7f051~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=910&h=450&s=28337&e=png&b=fef5f5) 2. 步骤28，如果有函数参数表达式，30步骤之前环境记录关系如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/767d188f96dc442f8a111b3058ff883c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1017&h=428&s=33167&e=png&b=fdf2f2) 3. 步骤30 ，如果非严格模式，到函数申明实例化完毕 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d0aada5246a4ecf936e51a272eba29d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=986&h=484&s=37718&e=png&b=fdf2f2) 小结四个环境记录的作用， **从函数申明环境环境倒推**： | 序号 | 类型 | 创建时机 | 本示例保存的申明 | 保存的申明绑定关系 | | --- | ------ | ------ | ---------------- | -------------------- | | 第一个 | 函数申明环境 | 函数准备调用 | evalC | 参数表达式 `eval`创建的var申明 | | 第二个 | 申明环境记录 | 步骤20 | paramA,arguments | 函数参数的绑定关系 | | 第三个 | 申明环境记录 | 步骤28 | varA,fn | var申明和函数申明 | | 第四个 | 申明环境记录 | 步骤30 | letA | `let,const，class`等词法申明 | ### 场景3：非严格模式 + 无函数参数表达式（新建1个环境记录） ```javascript function test(paramA, paramB){ var varA = "varA"; let letA = "letA"; function fn(){ console.log("i am a function"); } console.log(paramA, paramB, letC, fn); } test("paramA","paramB"); ``` （步骤30 ，如果非严格模式），到函数申明实例化完毕 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b260d54d00ef4639bfcc971bb2be9676~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=967&h=401&s=21374&e=png&b=fdf3f3) 小结2个环境记录的作用， **从函数申明环境环境倒推**： | 序号 | 类型 | 创建时机 | 本示例保存的申明 | 保存的申明绑定关系 | | --- | ------ | ------ | -------- | --- | | 第一个 | 函数申明环境 | 函数准备调用 | paramA, paramB
arguments
varA
fn | 形参
变量申明
函数申明 | | 第二个 | 申明环境记录 | 步骤30 | letA | let/const等词法申明 | ### 场景4：严格模式 + 无函数参数表达式（新建0个环境记录）示例代码如下。 ```javascript function test(paramA, paramB){ "use strict" var varA = "varA"; let letA = "letA"; function fn(){ console.log("i am a function"); } console.log(paramA, paramB, letC, fn); } test("paramA","paramB"); ``` 步骤20，步骤28，步骤30均没有走，没有新建环境记录。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/afdbd276e57444acbb774fad9ec7e166~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=834&h=329&s=21733&e=png&b=fdefef) 小结1个环境记录的作用， **从函数申明环境环境倒推**： | 序号 | 类型 | 创建时机 | 本示例保存的申明 | 保存的申明绑定关系 | | --- | ------ | ------ | --------------------------------------------------------- | ------------------------------------------- | | 第一个 | 函数申明环境 | 函数准备调用 | paramA, paramB
arguments
varA
fn
letA |
形参
变量申明
函数申明
let/const等词法申明 | ### 小结 1. 严格模式 + 参数表达式这两个条件额外的环境记录的创建 1. 非严格模式 + 有参数表达式 3 2. 非严格模式 + 无参数表达式 1 3. 严格模式 + 无参数表达式 0 2. 函数申明环境记录，会根据严格模式 + 参数表达式组合模式，保存不同形式的申明绑定关系。 3. 执行上下文词法环境和变量环境有可能相等 ## 函数新建三个环境记录示例上下文通过 [ResolveBinding ( name [ , env ] )](https://tc39.es/ecma262/#sec-resolvebinding) 来查找标志符的并生成引用记录，绝大多情况都是没有传 env参数时（解构，剩余参数等情况会传递），就默认会从执行上下文的词语环境记录开始查找。之后就会通过环境记录的 `[[outerEnv]]`一层一层往外查找。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f249d382ec54809a50989c940ef54cc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1097&h=304&s=49814&e=png&b=fffdfd) 如下示例标志符的查找是从执行上下文的词语环境开始的。 ```javascript function test(paramA = eval('var evalC = "evalC"')){ var varA = "varA"; let letA = "letA"; function fn(){ console.log("i am a function"); } console.log(paramA, evalC, varA, letA, fn); } test(); ``` 其执行上下文和环境记录的关系图如下： `console.log(paramA, evalC, varA, letA, fn)` 调整为` console.log(evalC, test.name); `这里就牵涉两个标志符的查找。实际上画出了关系图，查找嘛，三岁小孩子都会。 - evalC ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ccbfa396841c4930813ab53d61a2818f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1042&h=523&s=43829&e=png&b=fdf4f4) - test ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39ee95f566b74c7c91ac4d62cbf70015~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1017&h=519&s=43650&e=png&b=fdf3f3) ## 引用步骤20， eval [`eval` declaration instantiation when calling context is evaluating formal parameter initializers](https://stackoverflow.com/questions/67855714/eval-declaration-instantiation-when-calling-context-is-evaluating-formal-param) [Normative: Eliminate extra environment for eval in parameter initializers #1046](https://github.com/tc39/ecma262/pull/1046) 步骤28， [Where are arguments positioned in the lexical environment?](https://stackoverflow.com/questions/61208843/where-are-arguments-positioned-in-the-lexical-environment) [How to check if a variable is an ES6 class declaration?](https://stackoverflow.com/questions/30758961/how-to-check-if-a-variable-is-an-es6-class-declaration) [FunctionDeclarationInstantiation](https://aaron-bird.github.io/2019/06/29/FunctionDeclarationInstantiation/)