02. ECMA Script 6 - 执行上下文EC与箭头函数

Posted 2021-05-01 ihap 技术黑洞

篇中，有些朋友问我关于 ec 究竟是怎么样的内部运转机制。描述的有些含糊，这期我们接着讲 ec，顺带讲一讲 es6 中的 arrow function。

执行上下文 EC 的过程

前情回顾：上回书说到，ec的构成是由lexical environment、variable environment、outer 三者组成。很多人还是对这里不理解，那么这次，肥少带你细致的讲解一下吧。让你知道，ec 的世界多么神奇。首先，引入几个名词：

• lexical environment (lex env, 词法环境)

• variable environment (var env, 变量环境)

• variable object (VO, 变量对象)

• activation object (AO, 活动对象)

• execution context (ec, 执行上下文/执行环境)

  
  

ES5 中，因为词法环境的引入，所以在ec中，AO被替换成了lex env，本篇不会细致去讲 AO/VO，我们直接进入主题，讲一讲上次大家不理解的ES5的ec。

function ihapIsGood() {
	var a = 1;
	let b = 2;
	if (true) {
		var c = 3;
		const d = 4;
		
		(function foo(e) {
			var f = 5;
			let g = 6;
		})(7);
	}
}
ihapIsGood();

让我们看一下上面的代码，这是一段很简单的代码。接下来让我们用es5的ec来分析上述代码究竟发生了什么过程。当ihapIsGood函数被执行的时候，有两个阶段：1. 创建阶段；2. 执行阶段。创建阶段，首先会进行初始化ec，ec如下所示：

ExecutionContext: {
	LexicalEnvironment: {},
	VariableEnvironment: LexicalEnvironment,
	Outer: {},
}

结合上面的函数，让我们继续看下去：

// 形态 1 - 第一层，不包含 if
execution context: {
	lexical environment: {
		b,
	},
	variable environment: {
		a,
		c,
	},
	outer: global,
}

// 形态 2 - 第二层，不包含 foo 的内容
execution context: {
	lexical environment: {
		d,
		foo,
		outer: lexical environment: {
			b,
		},
	},
	variable environment: {
		a,
		c,
	},
	outer: global,
}

// 完全形态
// ihapIsGood
execution context: {
	lexical environment: {
		d,
		foo,
		outer: lexical environment: {
			b,
		}
	},
	variable environment: {
		a,
		c,
	},
	outer: global,
}
// foo
execution context: {
	lexical environment: {
		e,
		g,
		outer: variable environment,
	},
	variable environment: {
		f,
	},
	outer: ihapIsGood,
}

看到这里，大家是否有种恍然大明白的感觉呢？

在创建的时候：

1. 符合词法环境的声明性环境记录，会进入词法环境中。

2. 嵌套则会以outer的形式形成链式。

3. 函数会产生新ec，以栈的形式存放多个ec。

4. 最外层的outer则表明上一级的环境。

Arrow Function

箭头函数的this指向问题，与Function不同。首先我们要知道，Function的this是在什么时候绑定的。还是刚刚的ec，在进入创建阶段的时候，还有一个关键流程就是this绑定问题。

按例，我们先进行名词解释：

动态作用域、词法（静态）作用域。

追溯到上古时期，Lisp、Schema那个年代，作用域是分为动态和词法的，动态作用域不在乎当前这个值是什么，只在乎在什么时候调用。而词法作用域就依照当前作用域或者符合词法作用域传递的情况下，当前这个值是什么。举个