浅谈前端面试题 JavaScript 执行上下文和执行栈

执行上下文：

什么是执行上下文

先看一段代码在浏览器中的执行结果：

console.log(a);
b();
console.log(this);
var a = 1;
function b(){
    console.log("b")
}

执行结果：

我们都知道javascript是一种解释性语言 ，它会从上至下逐行执行，但是很明显以上代码就不是这回事。其实javascript在执行代码前，会做的一些准备工作，这就是创建对应的执行上下文，可以抽象的理解为执行上下文就是Javascript执行时存在的环境。

执行上下文的类型

全局执行上下文

1. javascript在执行代码前，将window确定为全局执行上下文。

2. 对全局的数据进行预处理：

   1）var 定义的全局变量，初始值为 undefined，造成声明提升 ，并添加为window的属性。

   2）function声明的全局函数添加为window的方法。

   3）将this的指针执行全局对象window。点击进入js中的多种this指向详解

3. 开始执行全局代码。

函数执行上下文

1. 在调用函数，准备执行函数体前，临时创建对应的函数上下文对象。

2. 对局部数据进行预处理：

   1）首先会初始化函数的参数arguments，添加为函数上下文对象的属性。

   2）var 定义的局部变量，初始值为 undefined，造成声明提升 ，并添加为函数上下文对象的属性。

   3）function声明的函数添加为函数上下文对象的方法。

   4）将this的指针指向调用函数的对象。点击进入js中的多种this指向详解

3. 开始执行代码

执行上下文栈

在全局执行代码前，JS引擎会创建一个栈来存储管理所有的执行上下文对象

在全局执行上下文(window)确定后，将其添加到栈中

在函数执行上下文创建后，将其添加到栈中

当前函数执行完后，将栈顶对象移除

当所有代码执行完后，栈中只剩下window

eval函数执行上下文

运行在eval函数中的代码也获得了自己的执行上下文。

执行上下文的生命周期

创建阶段 - 执行阶段 - 回收阶段

1)创建阶段

当函数被调用但是未执行内部的任何代码之前，会做以下几件事：

1. 创建变量对象：首先会初始化函数的参数arguments，提升函数声明和变量声明
2. 创建作用域连：在执行上下文创建阶段，作用域链是在变量对象之后创建的，
3. 确定this指向

2)指向阶段

变量赋值，代码执行

3)执行上下文出栈，等待垃圾回收。