聊聊对浏览器的认知(五)：浏览器中的JavaScript：调用栈

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

上面代码，在执行add()之前，JavaScript引擎会给这段代码创建一个全局执行上下文，其变量环境中包含了声明的变量和函数，如下图：

图片获取于网络非作者原创

当代码执行add时，会从全局上下文中取出add函数代码进行编译，并为该代码生成一个函数执行上下文和可执行代码，编译结果如下：

调用栈（执行上下文栈）

先粘上定义：调用栈就是用来管理函数调用关系的一种数据结构，具有先进先出的特性。

通过一段代码演示调用栈执行过程。

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

下图为执行上下文创建弹出的过程（绿色数字为进栈顺序，红色是出栈顺序）：

                                       图片获取于网络非作者原创

栈溢出

对于一些不友好的代码（例如：一段递归无限自调函数），可能会导致栈溢出。因为栈是有大小的，当入栈的执行上下文超过栈的上限，JavaScript引擎就会抛出栈溢出的错误。