详解JavaScript调用栈、尾递归和手动优化

在 JavaScript 中，当函数被调用时，它们会被添加到一个叫做调用栈（Call Stack）的数据结构中。本文将深入探讨 JavaScript 的调用栈是如何工作的，并通过解释尾递归和手动优化等概念，帮助你更好地理解在代码执行过程中发生了什么。

调用栈

调用栈是一个 LIFO（Last In First Out）结构，即后进先出。在 JavaScript 中，它用来记录当前上下文的信息。当一个函数被调用时，其上下文会被添加到调用栈顶端；当函数执行完成后，会从调用栈中弹出并销毁相应的上下文。

例如，下面的代码演示了调用栈的工作过程。

function foo() {
  console.log("foo");
}

function bar() {
  foo();
  console.log("bar");
}

bar();

当 bar 函数被调用时，bar 上下文将被添加到调用栈顶端。接着，bar 函数调用 foo 函数，将 foo 上下文添加到调用栈。最后，foo 函数完成后，其上下文从调用栈中弹出并销毁，接下来，bar 函数执行完毕，也被弹出并销毁。

尾递归

尾递归是指在一个函数的最后一步调用自身。当递归函数遇到大量无法完全展开的函数调用时，会导致栈溢出并抛出异常。为了避免这种情况发生，开发者可以使用尾递归来改善这种情况。

例如，下面的代码展示了斐波那契数列的递归实现方式。

function fibonacci(n) {
  if (n === 0) return 0;
  if (n === 1) return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(5)); // 5

其中，当计算 fibonacci(5) 时，需要展开 fibonacci(4) 和 fibonacci(3)，然后逐步展开到 fibonacci(0) 和 fibonacci(1)，共需递归调用 fibonacci 函数 13 次。这反映到调用栈中，就会有 13 层栈帧。因此，当计算 fibonacci(10000) 时，程序将会崩溃。

使用尾递归来解决该问题，代码如下所示。

function fibonacci(n, prev = 0, curr = 1) {
  if (n === 0) return prev;
  if (n === 1) return curr;
  return fibonacci(n - 1, curr, prev + curr);
}

console.log(fibonacci(5)); // 5

其中，函数 fibonacci 用三个参数：当前数字 n、前一个斐波那契数字 prev 和当前的斐波那契数字 curr，通过在最后一行使用相应的参数来避免不必要的函数调用。由于 JavaScript 引擎进行了尾递归优化，因此该代码只执行 5 次递归调用，而不会导致栈溢出的问题。

手动优化

手动优化是指通过各种手段来改善代码效率的方式。例如，将递归函数改写成迭代形式，避免使用不必要的循环、避免重复计算等等。手动优化可能会使代码更加复杂，并且可能会损害可读性，因此必须进行权衡。

以下是一些手动优化实例。

短路运算符

在条件语句中，可以使用短路运算符来避免不必要的计算。

例如，下面的代码：

if (x > 0 && y > 0) {
  // ...
}

可以使用短路运算符重写为：

if (x > 0 && y > 0 && x + y > 10) {
  // ...
}

如果 x > 0 && y > 0 返回 false，则不会计算 x + y > 10。

变量缓存

为了避免重复计算，可以通过使用变量缓存来将结果存储到变量中。

例如，下面的代码：

function test(n) {
  return fib(n) + fib(n - 1);
}

function fib(n) {
  if (n === 0 || n === 1) return n;
  return fib(n - 1) + fib(n - 2);
}

可以使用变量缓存来避免重复计算：

function test(n) {
  const prev = fib(n - 1);
  const curr = fib(n);
  return curr + prev;
}

function fib(n, memo = {}) {
  if (n === 0 || n === 1) return n;
  if (memo[n]) return memo[n];
  memo[n] = fib(n - 1, memo) + fib(n - 2, memo);
  return memo[n];
}

其中，memo 变量用来保存已经计算过的值，避免重复计算。

结论

以上是关于 JavaScript 调用栈、尾递归和手动优化的详细讲解。了解这些概念，可以帮助你更好地掌握 JavaScript 语言的特性，避免在扩展应用时遇到调用栈溢出等问题，并实现更优雅、高效的代码。