JS 执行过程：执行上下文、词法环境 - 版本历史

Eijux：/* This 绑定（This Binding） */

2023-04-18T10:07:57Z

This 绑定（This Binding）

←上一版本		2023年4月18日 (二) 18:07的版本
第216行：		第216行：
	## 否则，this 的值被设置为“'''全局对象'''”（非严格模式）或者 <code>'''undefined'''</code>（严格模式）		## 否则，this 的值被设置为“'''全局对象'''”（非严格模式）或者 <code>'''undefined'''</code>（严格模式）
	</div>		</div>


			关于“this”的理解，参考：[https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ 《Understanding JavaScript Function Invocation and "this"》]

	== 补充内容 ==		== 补充内容 ==

Eijux：/* 执行上下文（Execution Contexts） */

2023-04-17T23:21:52Z

执行上下文（Execution Contexts）

←上一版本		2023年4月18日 (二) 07:21的版本
第2行：		第2行：

	== 执行上下文（Execution Contexts） ==		== 执行上下文（Execution Contexts） ==
	''' <big>执行上下文</big>（Execution Contexts）'''~~：是一种规范设备，用于跟踪ECMAScript实现对代码的运行时评估~~ —— JavaScript 代码都需要运行在相应的“执行上下文”中		''' <big>执行上下文</big>（Execution Contexts）'''：是一种规范设备，用于跟踪 ECMAScript 实现对代码的运行时评估 —— JavaScript 代码都需要运行在相应的“执行上下文”中

	执行上下文一共有三种类型：		执行上下文一共有三种类型：

Eijux：/* 状态组件（State Components） */

2023-04-17T23:16:30Z

状态组件（State Components）

←上一版本		2023年4月18日 (二) 07:16的版本
第62行：		第62行：
	! colspan="2" \| “生成器执行上下文”的附加状态组件		! colspan="2" \| “生成器执行上下文”的附加状态组件
	\|-		\|-
	\| ~~词法环境（LexicalEnvironment）~~ \|\| ~~标识“词法环境”，用于解析代码在此执行上下文中造成的标识符引用。~~		\| 生成器（Generator） \|\| 此执行上下文正在评估的 Generator 对象。
	\|}		\|}

Eijux：/* 案例分析 */

2023-04-17T23:12:50Z

案例分析

←上一版本		2023年4月18日 (二) 07:12的版本
第331行：		第331行：
	以如下代码为例：		以如下代码为例：
	: <syntaxhighlight lang="JavaScript" highlight="">		: <syntaxhighlight lang="JavaScript" highlight="">
	let a = 20;		let a = 10;
	const b = 30;		const b = 20;
	var c;		var c;
	function multiply(e~~, f~~) {		function multiply(d, e) {
	var g = 20;		var f = 50;
	return e * f * g;		return d * e * f * a;
	}		}
	c = multiply(20, 30);		c = multiply(30, 40);
	</syntaxhighlight>		</syntaxhighlight>

	分析 JavaScript 引擎执行过程：		分析 JavaScript 引擎执行过程：
	# “'''全局执行上下文'''”的“'''创建阶段'''”：		# “'''全局执行上下文'''”的“'''创建阶段'''”：
	#: ~~创建“词法环境（Lexical Environment）”、“变量环境（Variable Environment）”组件~~		#: 创建“词法环境”、“变量环境”组件
	#: <syntaxhighlight lang="JavaScript" highlight="">		#: <syntaxhighlight lang="JavaScript" highlight="">
	GlobalExectionContext = {		GlobalExectionContext = {
第376行：		第376行：
	Type: "Object",		Type: "Object",
	// Identifier bindings go here		// Identifier bindings go here
	a: 20,		a: 10,
	b: 30,		b: 20,
	multiply: <func>		multiply: <func>
	}		}
第395行：		第395行：
	</syntaxhighlight>		</syntaxhighlight>
	# “'''函数执行上下文'''”的“'''创建阶段'''”：		# “'''函数执行上下文'''”的“'''创建阶段'''”：
	#: ~~创建“词法环境（Lexical Environment）”、“变量环境（Variable Environment）”组件~~		#: 创建“词法环境”、“变量环境”组件
	#: <syntaxhighlight lang="JavaScript" highlight="">		#: <syntaxhighlight lang="JavaScript" highlight="">
	FunctionExectionContext = {		FunctionExectionContext = {
第402行：		第402行：
	Type: "Declarative",		Type: "Declarative",
	// Identifier bindings go here		// Identifier bindings go here
	Arguments: {0: 20, 1: 30, length: 2},		Arguments: {0: 30, 1: 40, length: 2},
	},		},
	outer: <GlobalLexicalEnvironment>,		outer: <GlobalLexicalEnvironment>,
第411行：		第411行：
	Type: "Declarative",		Type: "Declarative",
	// Identifier bindings go here		// Identifier bindings go here
	g: undefined		f: undefined
	},		},
	outer: <GlobalLexicalEnvironment>,		outer: <GlobalLexicalEnvironment>,
第427行：		第427行：
	Type: "Declarative",		Type: "Declarative",
	// Identifier bindings go here		// Identifier bindings go here
	Arguments: {0: 20, 1: 30, length: 2},		Arguments: {0: 30, 1: 40, length: 2},
	},		},
	outer: <GlobalLexicalEnvironment>,		outer: <GlobalLexicalEnvironment>,
第436行：		第436行：
	Type: "Declarative",		Type: "Declarative",
	// Identifier bindings go here		// Identifier bindings go here
	g: 20		f: 50
	},		},
	outer: <GlobalLexicalEnvironment>,		outer: <GlobalLexicalEnvironment>,
第443行：		第443行：
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			#* 函数中使用了<span style="color: blue"><abbr title="跨作用域的变量">'''自由变量'''</abbr></span>（“a”），将通过其“'''外部词法环境引用'''”（到“GlobalLexicalEnvironment”中）查找
	# “'''全局执行上下文'''”的“'''执行阶段'''”：		# “'''全局执行上下文'''”的“'''执行阶段'''”：
	#: 按照代码顺序逐行执行，并按需更新变量和函数的值		#: 按照代码顺序逐行执行，并按需更新变量和函数的值
第451行：		第452行：
	Type: "Object",		Type: "Object",
	// Identifier bindings go here		// Identifier bindings go here
	a: 20,		a: 10,
	b: 30,		b: 20,
	multiply: <func>		multiply: <func>
	}		}
第462行：		第463行：
	Type: "Object",		Type: "Object",
	// Identifier bindings go here		// Identifier bindings go here
	c: ~~12000~~,		c: 600000,
	}		}
	outer: <null>,		outer: <null>,

Eijux：/* 网络文章 */

2023-04-17T22:56:09Z

网络文章

←上一版本		2023年4月18日 (二) 06:56的版本
第520行：		第520行：
	# [https://juejin.cn/post/6844903733495595016 《深入JavaScript系列（一）：词法环境》]		# [https://juejin.cn/post/6844903733495595016 《深入JavaScript系列（一）：词法环境》]
	# [https://juejin.cn/post/7118721446615973896 《JavaScript筑基（三）：环境记录》]		# [https://juejin.cn/post/7118721446615973896 《JavaScript筑基（三）：环境记录》]
	# [https://limeii.github.io/2019/05/js-lexical-environment/ 《JS：深入理解JavaScript-词法环境》]		# [https://limeii.github.io/2019/05/js-lexical-environment/ 《JS：深入理解JavaScript-词法环境》] —— 案例不错

Eijux：/* 网络文章 */

2023-04-17T22:51:51Z

网络文章

←上一版本		2023年4月18日 (二) 06:51的版本
第514行：		第514行：

	=== 网络文章 ===		=== 网络文章 ===
	# [https://juejin.cn/post/6844903682283143181 《<nowiki>[译]</nowiki> 理解 JavaScript 中的执行上下文和执行栈》]		注意：部分文章表述的是旧版本的 ES：
	# [https://juejin.cn/post/~~6945240902625394718 《你真的了解执行上下文吗？》~~]		# [https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0 《Understanding Execution Context and Execution Stack in Javascript》]
			#: [https://juejin.cn/post/7129510217863299102 《ES2018 最新【译】理解Javascript中的执行上下文和执行栈》] —— 比较完善，列出了 ES 不同版本的变化
			#: [https://juejin.cn/post/6844903682283143181 《<nowiki>[译]</nowiki> 理解 JavaScript 中的执行上下文和执行栈》] —— 不太准确
			# [https://juejin.cn/post/6844903733495595016 《深入JavaScript系列（一）：词法环境》]
			# [https://juejin.cn/post/7118721446615973896 《JavaScript筑基（三）：环境记录》]
			# [https://limeii.github.io/2019/05/js-lexical-environment/ 《JS：深入理解JavaScript-词法环境》]

Eijux：/* ECMAScript */

2023-04-17T22:40:21Z

ECMAScript

←上一版本		2023年4月18日 (二) 06:40的版本
第482行：		第482行：
	::* “ECMAScript语言类型（ECMAScript Language Types）”：包括 '''Undefined'''、'''Null'''、'''Boolean'''、'''String'''、'''Symbol'''、'''Number''' 和 '''Object'''		::* “ECMAScript语言类型（ECMAScript Language Types）”：包括 '''Undefined'''、'''Null'''、'''Boolean'''、'''String'''、'''Symbol'''、'''Number''' 和 '''Object'''
	<blockquote>		<blockquote>
	每个声明性环境记录都与 ECMAScript ~~程序范围相关联，该程序范围包含的~~ '''variable'''（变量）, '''constant'''（常量）, '''let''', '''class''', '''module''', '''import''', and/or '''function''' ~~等内容的声明。声明性环境记录绑定其范围内包含的声明所定义的标识符集。~~		每个声明性环境记录都与 ECMAScript 程序范围相关联，该程序范围包含 '''variable'''（变量）, '''constant'''（常量）, '''let''', '''class''', '''module''', '''import''', and/or '''function declarations'''。声明性环境记录绑定其范围内包含的声明所定义的标识符集。
	</blockquote>		</blockquote>
	</ref>		</ref>

Eijux：/* 环境记录（Environment Record） */

2023-04-17T22:39:11Z

环境记录（Environment Record）

←上一版本		2023年4月18日 (二) 06:39的版本
第143行：		第143行：
	# <span style="color: green">'''声明式环境记录（Declarative Environment Record）'''</span>：记录 '''范围内的声明'''		# <span style="color: green">'''声明式环境记录（Declarative Environment Record）'''</span>：记录 '''范围内的声明'''
	#* 主要用于“'''函数'''”和“'''catch'''”词法环境		#* 主要用于“'''函数'''”和“'''catch'''”词法环境
	# <span style="color: green">'''对象式环境记录（Object Environment Record）'''</span>：记录 '''~~范围内使用的全局声明~~'''		# <span style="color: green">'''对象式环境记录（Object Environment Record）'''</span>：记录 '''绑定对象的属性'''
	#* 主要用于“'''with'''”和 '''global''' 的词法环境		#* 主要用于“'''with'''”和 '''global''' 的词法环境
	# <span style="color: green">'''全局环境记录（Global Environment Record）'''</span>：一个对“对象式环境记录”和“声明式环境记录”组件的封装		# <span style="color: green">'''全局环境记录（Global Environment Record）'''</span>：一个对“对象式环境记录”和“声明式环境记录”组件的封装

	==== 声明式环境记录（Declarative Environment Record）<ref group="ECMAScript" name="声明式环境记录"/> ====		==== 声明式环境记录（Declarative Environment Record）<ref group="ECMAScript" name="声明式环境记录"/> ====
	'''声明式环境记录'''：与 '''ECMAScript 程序范围'''~~相关联，用于定义“~~'''ECMAScript ~~语言语法元素的结果~~'''”		'''声明式环境记录'''：与<span style="color: blue">'''ECMAScript 程序范围'''</span>相关联，将绑定其范围内包含的<span style="color: blue">'''声明（declarations）'''</span>所定义的标识符集


			<big>💡</big>“'''ECMAScript 程序范围'''”包括：<span style="color: blue">'''variable'''、'''constant'''、'''let'''、'''class'''、'''module'''、'''import'''、'''function declarations'''</span> 等所定义的标识符集

	注意：		注意：
第156行：		第159行：
	* 其方法（GetBindingValue）：如果该 binding 是一个 uninitialized binding，将引发 ReferenceError		* 其方法（GetBindingValue）：如果该 binding 是一个 uninitialized binding，将引发 ReferenceError

	~~💡 什么是“~~'''~~ECMAScript 语言语法元素的结果~~'''”？		==== 对象式环境记录（Object Environment Record）<ref group="ECMAScript" name="对象式环境记录"/> ====
			'''对象式环境记录'''：与一个<span style="color: blue">'''绑定对象（binding object）'''</span>相关联，将绑定与其“绑定对象”的属性名称直接对应的字符串标识符名称集

	~~就是：“ECMAScript 语言语法元素”（如“函数声明”，“变量声明”，“catch子句”）会将'''“标识符绑定”与“ECMAScript 语言值”直接关联'''。~~

	包括：范围内的 <span style="color: blue">'''variable'''、'''constant'''、'''let'''、'''class'''、'''module'''、'''import'''、'''function'''</span> 等<span style="color: blue">'''声明（declarations）'''</span> 所定义的标识符集

			<big>💡</big>“'''绑定对象（binding object）'''”包括：<span style="color: blue">'''全局对象'''</span>（即浏览器环境的“<span style="color: blue">Window 对象</span>”）、<span style="color: blue">'''With 语句关联的对象'''</span>
	~~P.S. “ECMAScript 语言值”包括：~~'''~~Undefined~~'''、'''~~Null~~'''~~、'''Boolean'''、'''String'''、'''Symbol'''、'''Number''' 和 '''Object'''~~

	~~==== 对象式环境记录（Object Environment Record）~~<~~ref group~~="~~ECMAScript" name="对象式环境记录~~"/> ~~====~~
	~~'''对象式环境记录'''：与一个~~<span style="color: blue">'''~~绑定对象（binding object）~~'''</span>~~相关联，用于定义“'''ECMAScript 元素的结果'''”~~

	~~—— 将绑定与其“binding object”的属性名称直接对应的字符串标识符名称集~~

	注意：		注意：
第192行：		第187行：
	* 无论<code><nowiki>[[Enumerable]]</nowiki></code>属性的设置如何，集合中始终包含了“'''自身的'''”和“'''继承的'''”属性		* 无论<code><nowiki>[[Enumerable]]</nowiki></code>属性的设置如何，集合中始终包含了“'''自身的'''”和“'''继承的'''”属性
	* 因为对象可以动态添加和删除属性，所以绑定的“标识符”集一定是'''可变的'''		* 因为对象可以动态添加和删除属性，所以绑定的“标识符”集一定是'''可变的'''

	~~💡 什么是“'''ECMAScript 元素的结果'''”？~~

	~~就是：“ECMAScript 元素”（如 With 语句）会将'''“标识符绑定”与“某些对象的属性”相关联'''。~~

	包括：范围使用的 <span style="color: blue">'''全局声明'''</span>（“某些对象”即浏览器环境的“<span style="color: blue">Window 对象</span>”）、<span style="color: blue">'''With 语句'''</span> 所定义的标识符集

	==== 全局环境记录（Global Environment Record）<ref group="ECMAScript" name="全局环境记录"/> ====		==== 全局环境记录（Global Environment Record）<ref group="ECMAScript" name="全局环境记录"/> ====

2023年4月17日 (一) 22:08 Eijux

2023-04-17T22:08:58Z

显示更改

Eijux：/* 案例分析 */

2023-04-17T21:21:50Z

案例分析

←上一版本		2023年4月18日 (二) 05:21的版本
第229行：		第229行：

	== 案例分析 ==		== 案例分析 ==
			以如下代码为例：
			: <syntaxhighlight lang="JavaScript" highlight="">
			let a = 20;
			const b = 30;
			var c;
			function multiply(e, f) {
			var g = 20;
			return e * f * g;
			}
			c = multiply(20, 30);
			</syntaxhighlight>

			分析 JavaScript 引擎执行过程：
			# “'''全局执行上下文'''”的“'''创建阶段'''”：
			#: 创建“词法环境（Lexical Environment）”、“变量环境（Variable Environment）”组件
			#: <syntaxhighlight lang="JavaScript" highlight="">
			GlobalExectionContext = {
			LexicalEnvironment: {
			EnvironmentRecord: {
			Type: "Object",
			// Identifier bindings go here
			a: <uninitialized> ,
			b: <uninitialized> ,
			multiply: <func>
			}
			outer: <null> ,
			ThisBinding: <Global Object>
			},
			VariableEnvironment: {
			EnvironmentRecord: {
			Type: "Object",
			// Identifier bindings go here
			c: undefined,
			}
			outer: <null> ,
			ThisBinding: <Global Object>
			}
			}
			</syntaxhighlight>
			# “'''全局执行上下文'''”的“'''执行阶段'''”：
			#: 按照代码顺序逐行执行，并按需更新变量和函数的值
			#: <syntaxhighlight lang="JavaScript" highlight="">
			GlobalExectionContext = {
			LexicalEnvironment: {
			EnvironmentRecord: {
			Type: "Object",
			// Identifier bindings go here
			a: 20,
			b: 30,
			multiply: <func>
			}
			outer: <null>,
			ThisBinding: <Global Object>
			},
			VariableEnvironment: {
			EnvironmentRecord: {
			Type: "Object",
			// Identifier bindings go here
			c: undefined,
			}
			outer: <null>,
			ThisBinding: <Global Object>
			}
			}
			</syntaxhighlight>
			# “'''函数执行上下文'''”的“'''创建阶段'''”：
			#: 创建“词法环境（Lexical Environment）”、“变量环境（Variable Environment）”组件
			#: <syntaxhighlight lang="JavaScript" highlight="">
			FunctionExectionContext = {
			LexicalEnvironment: {
			EnvironmentRecord: {
			Type: "Declarative",
			// Identifier bindings go here
			Arguments: {0: 20, 1: 30, length: 2},
			},
			outer: <GlobalLexicalEnvironment>,
			ThisBinding: <Global Object or undefined>,
			},
			VariableEnvironment: {
			EnvironmentRecord: {
			Type: "Declarative",
			// Identifier bindings go here
			g: undefined
			},
			outer: <GlobalLexicalEnvironment>,
			ThisBinding: <Global Object or undefined>
			}
			}
			</syntaxhighlight>
			#* ThisBinding：“非严格模式”为“Global Object”，“严格模式”为“undefined”
			# “'''函数执行上下文'''”的“'''执行阶段'''”：
			#: 按照代码顺序逐行执行，并按需更新变量和函数的值
			#: <syntaxhighlight lang="JavaScript" highlight="">
			FunctionExectionContext = {
			LexicalEnvironment: {
			EnvironmentRecord: {
			Type: "Declarative",
			// Identifier bindings go here
			Arguments: {0: 20, 1: 30, length: 2},
			},
			outer: <GlobalLexicalEnvironment>,
			ThisBinding: <Global Object or undefined>,
			},
			VariableEnvironment: {
			EnvironmentRecord: {
			Type: "Declarative",
			// Identifier bindings go here
			g: 20
			},
			outer: <GlobalLexicalEnvironment>,
			ThisBinding: <Global Object or undefined>
			}
			}
			</syntaxhighlight>
			# “'''全局执行上下文'''”的“'''执行阶段'''”：
			#: 按照代码顺序逐行执行，并按需更新变量和函数的值
			#: <syntaxhighlight lang="JavaScript" highlight="">
			GlobalExectionContext = {
			LexicalEnvironment: {
			EnvironmentRecord: {
			Type: "Object",
			// Identifier bindings go here
			a: 20,
			b: 30,
			multiply: <func>
			}
			outer: <null>,
			ThisBinding: <Global Object>
			},
			VariableEnvironment: {
			EnvironmentRecord: {
			Type: "Object",
			// Identifier bindings go here
			c: 12000,
			}
			outer: <null>,
			ThisBinding: <Global Object>
			}
			}
			</syntaxhighlight>

	== 补充内容 ==		== 补充内容 ==

JS 执行过程：执行上下文、词法环境 - 版本历史

Eijux：​/* This 绑定（This Binding） */

Eijux：​/* 执行上下文（Execution Contexts） */

Eijux：​/* 状态组件（State Components） */

Eijux：​/* 案例分析 */

Eijux：​/* 网络文章 */

Eijux：​/* 网络文章 */

Eijux：​/* ECMAScript */

Eijux：​/* 环境记录（Environment Record） */

2023年4月17日 (一) 22:08 Eijux

Eijux：​/* 案例分析 */

Eijux：/* This 绑定（This Binding） */

Eijux：/* 执行上下文（Execution Contexts） */

Eijux：/* 状态组件（State Components） */

Eijux：/* 案例分析 */

Eijux：/* 网络文章 */

Eijux：/* 网络文章 */

Eijux：/* ECMAScript */

Eijux：/* 环境记录（Environment Record） */

Eijux：/* 案例分析 */