JavaScript执行堆栈

我们首先看JavaScript的函数底层工作原理
一个函数运行的信息被存储在它的执行上下文里。
执行上下文是一个内部数据结构，它包含一个函数执行时的细节：当前工作流在哪里，当前的变量，this的值（这里我们不使用它），以及其他一些内部细节。
每个函数有嵌套调用时，下面的事情会发生：

• 当前函数被暂停；
• 与它关联的执行上下文被一个叫做执行上下文堆栈的特殊数据结构保存；
• 执行嵌套调用；
• 嵌套调用结束后，之前的执行上下文从堆栈中恢复，外部函数从停止的地方继续执行。
  我们看看调用pow(2, 3)都发生了什么。
  pow(2, 3)
  在调用pow(2, 3)的开始，执行上下文会存储变量：x = 2, n = 3,执行流程在函数的第1行。
  我们将其描绘如下：
  
  这是函数开始执行的时候，条件 n == 1结果为否，所以流程进入if的第二分支。

function pow(x, n) {
	if (n == 1) {
		return x;
	} else {
		return x * pow(x, n - 1);
	}
}
alert(pow(2, 3));

变量相同，但是函数变化了，所以现在上下文是：

为了计算x * pow(x, n - 1),我们需要用新的参数pow(2, 2)自调用pow。
pow(2, 2)
为了执行嵌套调用，JavaScript会记住执行上下文堆栈中的当前执行上下文。
这里我们调用相同的函数pow，但是没关系。所有函数的处理都是一样的：
1.当前上下文被「记录」在堆栈的顶部；
2.为子调用创建新上下文；
3.当子调用结束后 —— 前一上下文从堆栈弹出，继续执行。
下面是进入子调用pow(2, 2)的上下文堆栈：

新的当前执行上下文位于顶部(加粗)，前面的在下方。
在我们完成子调用后—— 很容恢复前面的上下文，因为它保留这变量和代码停止时的准确位置。图中我们使用了单词「行」，但实际比这更精确。
pow(2, 1)
重复该过程：在第5行生成新的子调用，现在使用参数x = 2， n = 1。
新的执行上下文被创建，前一个被压入堆栈顶部：

此时，有俩个旧的上下文和一个当前正在运行的给pow(2, 1)的上下文。
出口
在 pow(2, 1) 时，不像之前，条件 n == 1 成了是，所以 if 的第一分支生效：

function pow(x, n) {
	if (n == 1) {
		return x;
	} else {
		return x * pow(x, n - 1);
	}
}

此时不再有嵌套调用，所以函数结束，返回2。
函数结束后，它的执行上下文不再有用，会在内存中移除。前一上下文从栈顶恢复：

恢复执行pow(2, 2)，它有子调用pow(2, 1)的结果，所以它也可以结束x * pow(x, n - 1) 的执行，返回 4。
然后前一上下文被恢复：

当它结束后，我们得到结果pow(2, 3) = 8。
递归深度是：3。
从上面的图解可以看到，递归深度等于堆栈中上下文的最大个数。
注意内存要求。上下文消耗内存，在我们的例子中，求n次放需要存储n个上下文，以便减一后的n使用。
而循环算法更省内存：

function pow(x, n) {
	let result = 1;
	for (let i = 0; i < n; i++) {
		result *= x;
	}
	return result;
}

迭代pow仅使用一个上下文，在处理中修改i和result。它的内存要求比较小，且固定不依赖n。
任何递归都可以用循环来重写。循环变体一般更加有效。
但有时重写很难，尤其是函数根据条件使用不同的子调用，然后合并它们的结果，或者分支比较复杂。而且有些优化可能没有必要，完全不值得。
递归能提供更简洁的代码，容易理解和维护。优化并不是处处需要，大多数时候我们需要一个好代码，这就是它被使用的原因。