js_执行上下文（动态）与执行上下文栈

执行上下文

js代码在执行之前需要经过编译，经过编译后，会生成两部分内容：执行上下文（Execution context）和可执行代码。
执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。
在执行一段 JavaScript 代码之前，会编译代码，并将代码中的函数和变量保存到执行上下文的变量环境中，即每个上下文都有一个关联的变量环境对象。
变量环境对象可以理解为如下结构：

VariableEnvironment:
     myname -> undefined, 
     showName ->function : {console.log(myname)

根据JavaScript执行流程，分析下面代码输出结果：

showName()
var showName = function() {
    console.log(2)
}
function showName() {
    console.log(1)
}

输出1
分析：首先遇到声明的变量showName，并在变量环境中存一个showName属性，赋值为undefined; 又遇到声明的同名函数，也存一个showName的属性，发现之前有这个属性了，就将属性覆盖掉，并指向堆中声明的这个函数地址。所以在执行阶段调用showName()会输出1;执行showName = function() {console.log(2)}这句话是把堆中的另一个函数地址赋值给了showName属性，也就改变了其属性值，所以如果再调用showName()，那个会输出2。
下面是关于同名变量和函数的两点处理原则：
1:如果是同名的函数，JavaScript编译阶段会选择最后声明的那个（前面的被覆盖）。
2:如果变量和函数同名，那么在编译阶段，变量的声明会被忽略，（函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。）
再看一个：

 const check=(firstName,lastName)=>{
     console.log(firstName);
     console.log(lastName);
     var firstName='chen';
     function firstName(){
         console.log('这是一个firstName函数');
     }
     lastName=()=>{
         console.log('这是一个lastName函数');
     }
     console.log(firstName);
     console.log(lastName);
 }
 check('Zhao','vivienne')

// ƒ firstName(){
//   console.log('这是一个firstName函数');
//  }
// vivienne
//chen
//  ()=>{
//       console.log('这是一个lastName函数');
//     }

结论：优先级：函数声明>传入实参数>变量声明
全局执行上下文：在执行全局代码前将window确定为全局执行上下文；对全局数据预处理；开始执行全局代码，而且在整个页面的生存周期内，全局执行上下文只有一份。
函数执行上下文：在调用函数准备执行函数体之前，创建对应的函数执行上下文对象；对局部数据预处理；开始执行函数体代码。一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。

执行上下文栈（调用栈）：

管理执行上下文的栈
在全局代码执行前，js引擎就会创建一个栈来存储管理所有的执行上下文对象；在全局上下文对象（window）确定后，将其入栈；在函数执行上下文对象创建后，压栈；当前函数执行完后，将栈顶对象出栈；当所有代码执行完后，栈中只剩下window。

由上图可以看出，执行上下文中包含了变量环境和词法环境。此外还有outer和this。
思考题：

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

这是一段递归代码，可以通过传入参数 n，让代码递归执行 n 次，也就意味着调用栈的深度能达到 n，当输入一个较大的数时，比如 50000，就会出现栈溢出的问题，那么你能优化下这段代码，以解决栈溢出的问题吗？

//入栈一个函数 执行完之后，再入栈
//异步调用，进队列
function runStack (n) {
  if (n === 0) return 100;
  return setTimeout(function(){runStack( n- 2)},0);
}
runStack(50000)