目标： * 执行上下文是什么 - 是环境 * 执行上下文都包括什么 * 执行上下文是什么时候被创建的 - 调用的时候 * 执行上下文的生命周期是什么 - 创建，执行，销毁 ## 执行上下文是什么 * 是js代码运行的环境 * 全局执行上下文在js代码执行前创建 * 函数执行上下文在函数被调用时创建 如何计算执行上下文的个数？ * 函数被调用几次，就有几个执行上下文。总数等于 n+1 ## 执行上下文 Javascript一共有三种执行上下文： * 全局执行上下文 1. 只能有一个 2. 创建 window 对象 3. 设置 this 的值 * 函数执行上下文 1. 函数被调用时创建 * eval 执行上下文 ## 执行上下文栈 - 调用栈，存储所有的执行上下文  ## 执行上下文的生命周期  创建阶段 ---- 执行阶段 ---- 回收阶段 1. 创建阶段 1. 创建变量对象 2. 创建作用域链 3. 确定this指向 2. 执行阶段 - **变量赋值，代码执行** 3. 回收阶段 - 执行上下文出栈 ## 执行上下文的创建 * 绑定this * 创建词法环境 - 存放**函数声明、let、const** 声明的变量 * 创建变量环境 - 存放** var **声明的变量 ``` let a = 20; const b = 30; var c; function multiply(e, f) { var g = 20; return e * f * g; } c = multiply(20, 30); ```  ## 预编译 执行代码时，首先进入预编译阶段 * 创建 AO 对象 （变量对象） * 找形参和变量的声明，作为 ao 对象的属性名，值是undefined * 实参 和 形参进行统一 * 找函数声明，会覆盖变量声明 ``` function fn (a, c){ console.log(a) var a = 123 console.log(a) console.log(c) function a () {} if(false){ var d = 678 } console.log(b) console.log(d) var b = function() {} console.log(b) function c() {} console.log(c) } fn(1, 2) ``` 预编译阶段的结果： ``` AO: { a: undefined -> 1 -> function a() {} c: undefined -> 2 -> function c() {} d: undefined -> function() {} b: undefined -> function() {} } ``` 执行阶段，挨个执行： function a() {} 123 function c() {} undefined undefined function() {} function c() {}