调用栈（Call Stack）

调用栈（Call Stack）是一个基本的计算机概念，这里引入一个概念：栈帧。

栈帧是指为一个函数调用单独分配的那部分栈空间。

当运行的程序从当前函数调用另外一个函数时，就会为下一个函数建立一个新的栈帧，并且进入这个栈帧，这个栈帧称为当前帧。而原来的函数也有一个对应的栈帧，被称为调用帧。每一个栈帧里面都会存入当前函数的局部变量。

当函数被调用时，就会被加入到调用栈顶部，执行结束之后，就会从调用栈顶部移除该函数。并将程序运行权利（帧指针）交给此时栈顶的栈帧。这种后进后出的结构也就是函数的调用栈。

而在JavaScript里，可以很方便的通过console.trace()这个方法查看当前函数的调用帧

尾调用

说尾递归之前必须先了解一下什么是尾调用。简单的说，就是一个函数执行的最后一步是将另外一个函数调用并返回。

以下是正确示范：

// 尾调用正确示范1.0
function f(x){
 return g(x);
}

// 尾调用正确示范2.0
function f(x) {
 if (x > 0) {
  return m(x)
 }
 return n(x);
}

1.0程序的最后一步即是执行函数g，同时将其返回值返回。2.0中，尾调用并不是非得写在最后一行中，只要执行时，是最后一步操作就可以了。

以下是错误示范：

// 尾调用错误示范1.0
function f(x){
 let y = g(x);
 return y;
}

// 尾调用错误示范2.0
function f(x){
 return g(x) + 1;
}
// 尾调用错误示范3.0
function f(x) {
 g(x); // 这一步相当于g(x) return undefined
}

1.0最后一步为赋值操作，2.0最后一步为加法运算操作，3.0隐式的有一句return undefined

尾调用优化

在调用栈的部分我们知道，当一个函数A调用另外一个函数B时，就会形成栈帧，在调用栈内同时存在调用帧A和当前帧B，这是因为当函数B执行完成后，还需要将执行权返回A，那么函数A内部的变量，调用函数B的位置等信息都必须保存在调用帧A中。不然，当函数B执行完继续执行函数A时，就会乱套。

那么现在，我们将函数B放到了函数A的最后一步调用（即尾调用），那还有必要保留函数A的栈帧么？当然不用，因为之后并不会再用到其调用位置、内部变量。因此直接用函数B的栈帧取代A的栈帧即可。当然，如果内层函数使用了外层函数的变量，那么就仍然需要保留函数A的栈帧，典型例子即是闭包。

在网上有很多关于讲解尾调用的博客文章，其中流传广泛的一篇中有这样一段。我不是很认同。

function f() {
 let m = 1;
 let n = 2;
 return g(m + n);
}
f();
// 等同于
function f() {
 return g(3);
}
f();
// 等同于
g(3);

以下为博客原文：上面代码中，如果函数g不是尾调用，函数f就需要保存内部变量m和n的值、g的调用位置等信息。但由于调用g之后，函数f就结束了，所以执行到最后一步，完全可以删除 f() 的调用记录，只保留 g(3) 的调用记录。

但我认为第一种中，也是先执行m+n这步操作，再调用函数g同时返回。这应当是一次尾调用。同时m+n的值也通过参数传入函数g内部，并没有直接引用，因此也不能说需要保存f内部的变量的值。

总得来说，如果所有函数的调用都是尾调用，那么调用栈的长度就会小很多，这样需要占用的内存也会大大减少。这就是尾调用优化的含义。

尾递归

递归，是指在函数的定义中使用函数自身的一种方法。函数调用自身即称为递归，那么函数在尾调用自身，即称为尾递归。

最常见的递归，斐波拉契数列，普通递归的写法：

function f(n) {
 if (n === 0 || n === 1) return n 
 else return f(n - 1) + f(n - 2)
}

这种写法，简单粗暴，但是有个很严重的问题。调用栈随着n的增加而线性增加，当n为一个大数（我测了一下，当n为100的时候，浏览器窗口就会卡死。。）时，就会爆栈了（栈溢出，stack overflow）。这是因为这种递归操作中，同时保存了大量的栈帧，调用栈非常长，消耗了巨大的内存。

接下来，将普通递归升级为尾递归看看。

function fTail(n, a = 0, b = 1) { 
 if (n === 0) return a
 return fTail(n - 1, b, a + b)
}

很明显，其调用栈为

复制代码 代码如下:
fTail(5) => fTail(4, 1, 1) => fTail(3, 1, 2) => fTail(2, 2, 3) => fTail(1, 3, 5) => fTail(0, 5, 8) => return 5

被尾递归改写之后的调用栈永远都是更新当前的栈帧而已，这样就完全避免了爆栈的危险。

但是，想法是好的，从尾调用优化到尾递归优化的出发点也没错），让我们看看V8引擎官方团队的解释

Proper tail calls have been implemented but not yet shipped given that a change to the feature is currently under discussion at TC39.

意思就是人家已经做好了，但是就是还不能不给你用：）嗨呀，好气喔。

当然，人家肯定是有他的正当理由的：

1. 在引擎层面消除尾递归是一个隐式的行为，程序员写代码时可能意识不到自己写了死循环的尾递归，而出现死循环后又不会报出stack overflow的错误，难以辨别。
2. 堆栈信息会在优化的过程中丢失，开发者调试非常困难。

道理我都懂，但是不信邪的我拿nodeJs（v6.9.5）手动测试了一下：

好的，我服了

手动优化

虽然我们暂时用不上ES6的尾递归高端优化，但递归优化的本质还是为了减少调用栈，避免内存占用过多，爆栈的危险。而俗话说的好，一切能用递归写的函数，都能用循环写——尼克拉斯·夏，如果将递归改成循环的话，不就解决了这种调用栈的问题么。

方案一：直接改函数内部，循环执行

function fLoop(n, a = 0, b = 1) { 
 while (n--) {
  [a, b] = [b, a + b]
 }
 return a
}

这种方案简单粗暴，缺点就是没有递归的那种写法比较容易理解。

方案二：Trampolining（蹦床函数）

function trampoline(f) { 
 while (f && f instanceof Function) {
  f = f()
 }
 return f
}

function f(n, a = 0, b = 1) { 
 if (n > 0) {
  [a, b] = [b, a + b]
  return f.bind(null, n - 1, a, b)
 } else {
  return a
 }
}

trampoline(f(5)) // return 5

这种写法算是容易理解一些了，就是蹦床函数的作用需要仔细看看。缺点还有就是需要修改原函数内部的写法。

方案三：尾递归函数转循环方法

function tailCallOptimize(f) { 
 let value
 let active = false
 const accumulated = []
 return function accumulator() {
  accumulated.push(arguments)
  if (!active) {
   active = true
   while (accumulated.length) {
    value = f.apply(this, accumulated.shift())
   }
   active = false
   return value
  }
 }
}

const f = tailCallOptimize(function(n, a = 0, b = 1) { 
 if (n === 0) return a
 return f(n - 1, b, a + b)
})
f(5) // return 5

经过 tailCallOptimize 包装后返回的是一个新函数 accumulator，执行 f时实际执行的是这个函数。这种方法可以不用修改原递归函数，当调用递归时只用使用该方法转置一下便可解决递归调用的问题。

总结

尾递归优化是个好东西，但既然暂时用不上，那我们就该在平时编码的过程中，对使用到了递归的地方特别敏感，时刻避免出现死循环，爆栈等危险。毕竟，好的工具不如好的习惯。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# javascript 调用栈  # javascript 尾递归  # js 尾递归优化  # 递归  # 就会  # 一个函数  # 的是  # 是一个  # 不上  # 即是  # 这是因为  # 尼克  # 过程中  # 都是  # 是个  # 也有  # 也会  # 有个  # 是有  # 隐式  # 让我们  # 一句  # 的说 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 长沙做网站要多少钱,长沙国安网络怎么样？  Laravel如何使用Blade模板引擎？（完整语法和示例）  三星网站视频制作教程下载,三星w23网页如何全屏？  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  如何在万网自助建站平台快速创建网站？  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  郑州企业网站制作公司,郑州招聘网站有哪些？  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  如何用PHP工具快速搭建高效网站？  详解Huffman编码算法之Java实现  在线制作视频的网站有哪些,电脑如何制作视频短片？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  如何快速搭建自助建站会员专属系统？  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  如何快速搭建安全的FTP站点？  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  详解jQuery中的事件  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  如何挑选最适合建站的高性能VPS主机？  高端网站建设与定制开发一站式解决方案 中企动力  Android okhttputils现在进度显示实例代码  Linux系统命令中tree命令详解  制作公司内部网站有哪些,内网如何建网站？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  linux写shell需要注意的问题(必看)  Laravel如何处理异常和错误？（Handler示例）  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  高防服务器租用指南：配置选择与快速部署攻略  如何快速生成凡客建站的专业级图册？  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  如何快速搭建高效可靠的建站解决方案？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Laravel定时任务怎么设置_Laravel Crontab调度器配置  Laravel如何自定义分页视图？（Pagination示例）  如何快速搭建高效香港服务器网站？  Laravel如何使用Telescope进行调试？（安装和使用教程）  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  使用Dockerfile构建java web环境  Laravel如何实现本地化和多语言支持？（i18n教程）  如何快速生成专业多端适配建站电话？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？