浏览器工作原理(8)-javascript栈溢出

最新推荐文章于 2022-03-12 19:00:30 发布

xxz15152

最新推荐文章于 2022-03-12 19:00:30 发布

阅读量515

点赞数

文章标签： javascript chrome

本文链接：https://blog.csdn.net/u013448372/article/details/107600799

版权

前面文章中说到，当一段代码被执行时，JavaScript引擎首先会对其进行编译，并创建执行上下文

那么什么样的代码片段会被编译，并创建执行上下文呢？一般下面三种情况都会被编译，并创建执行上下文：

本文我们详细聊一聊 调用栈 的概念，了解了调用栈有如下好处：

JavaScript中经常会出现一个函数调用另外一个函数，调用栈的作用就是管理函数调用关系的一种数据结构，首先要先明白什么是 函数调用 和 栈结构

函数调用就是使用函数名来执行一个函数，例如下面代码：


var a = 2
function add(){
	var b = 10
	return  a+b
}
add()

调用的方式就是add()，在执行add函数之前，JavaScript引擎首先编译，创建执行上下文，包含环境变量和词法环境：
在这里插入图片描述创建好执行上下文就可以开始执行代码，首先进行赋值操作，然后执行add函数，JavaScript引擎会判断这是一个函数调用，开始执行下面操作：

执行add 函数的时候，有两个执行上下文，一个全局的，一个函数内部自己的，从上面分析可知：执行JavaScript代码的时候，可能会存在多个执行上下文，那么JavaScript代码是如何管理这些执行上下文的呢？答案就是 栈调用

栈是先进后出的一种数据结构

JavaScript引擎就是利用栈的这个结构来管理执行上下文的，在创建好执行上下文后，引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为调用栈

看下面的一段代码：

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

在上面代码中，我们发现调用addAll的时候，里面又调用了add函数，那么调用栈是怎么变化的呢？
接下来一步一步分析一下代码执行过程中，调用栈的变化

在这里插入图片描述全局上下文创建之后，开始执行全局代码，首先执行a=2的操作，将全局执行上下文中的a赋值成2，如下图示

在这里插入图片描述创建好addAll 函数的执行上下文后开始执行函数内部的代码，d赋值为10

还是首先创建执行上下文，并压入栈中，如下图

在这里插入图片描述 add函数执行完成以后，将结果赋值给result变量，add函数的执行上下文从栈顶弹出

然后执行addAll函数，依然是执行完将addAll函数的执行上下文从栈顶弹出

最终只剩下全局的执行上下文

在这里插入图片描述到这里，整个JavaScript代码段就执行结束了，

上面的讲解大概了解了什么是调用栈，但是还有一个要知道的知识点–调用栈是有大小的，当入栈的执行上下文达到一定数量，JavaScript引擎会报错，这时候就出现了栈溢出

特别是写递归调用的时候，很容易出现死循环导致栈溢出

function division(a,b){
    return division(a,b)
}
console.log(division(1,2))


function runStack (n) {
  if (n === 0) return 100;
  return runStack( n- 2);
}
runStack(50000)

该代码会出现栈溢出，怎么优化可以避免出现溢出的情况呢？

关注