携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第33天，点击查看活动详情

栈溢出

在开发过程中，我们是不是经常在浏览器中看到如下报错信息：

并且一般出现，页面估计就卡成了麻花，无法操作。

这其实就是出现了栈溢出。是怎么造成了栈溢出呢？

下面我们就来具体看看。

调用栈

调用栈是用来管理函数调用关系的一种数据结构。

每一个函数都存在一个执行上下文，存储这种执行上下文的数据结构叫做栈，这就是调用栈。

我们看如下代码：

首先，我们会创建一个全局上下文，将其压入栈底。全局上下文压入栈后，就开始执行JavaScript代码：给变量a进行赋值2，然后调用addAll函数。

在addAll函数内部也是一个完整的全局上下文，我们会将该执行上下文也继续压入调用栈中，然后执行addAll函数内部代码。

addAll函数内部有变量d和函数add，执行时调用add函数，在函数内部也会形成执行上下文，会继续压入调用栈中。

在addAll函数中执行return返回值后，整个代码执行过程就结束了。

let a = 2
function add(b,c){
  return b + c
}
function addAll(b,c){
  let d = 10
  result = add(b,c)
  return  a + result + d
}
addAll(3,6)

再回到话题的中心：栈溢出。我们知道调用栈是用来存储执行上下文的栈结构，肯定是有大小上限的，当栈被存满后，就出出现栈溢出。当然，一般情况下的调用配合有回收机制是不会出现栈溢出的。出现栈溢出比较常见的情况是死循环，如果我们不断的在调用函数，并且没有设置终止的条件，就会出现栈溢出，开发过程中得特别注意了。

如下：

// 递归
function recursion () {
  return recursion()
}
console.log(recursion())

我们写了个递归调用，没有任何终止条件，肯定会出现栈溢出。

JavaScript栈溢出

栈溢出

调用栈