执行上下文和执行栈

什么是执行上下文？

个人理解：当前JavaScript代码解析和执行时候的环境就是执行上下文

执行上下文共有三种类型：

全局执行上下文：只有一个，JavaScript代码载入的时候就会进入这个环境，然后创建浏览器中的全局对象（window）,全局上下文的this指向window

函数执行上下文：有很多个，每个函数被调用的时候都会创建一个该函数的执行上下文

Eval执行上下文：Eval函数运行时的上下文

因为Eval函数存在性能及安全问题，所以一般不建议使用，本文主要讨论全局执行上下文及函数执行上下文

执行上下文的创建分为两个阶段：

1. 创建阶段

2. 执行阶段

创建阶段：确定this及作用域链,声明函数并初始化，声明变量并赋予默认值undefined，创建arguments对象

执行阶段：变量赋值并执行其它代码

注：上述创建阶段变量声明指var声明的变量，所以可以在变量声明前访问该变量(undefined),

如果是let或者const声明的变量，只有执行了let活const代码后该变量才可以访问，这是因为

let或const声明的变量，不存在变量提升。而且要求必须 等let声明语句执行完之后，变量才能使用，不然会报Uncaught ReferenceError错误。ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let或const命令声明变量之前，该变量都是不可用的。

看木易杨的文章讲创建阶段还会分为

1. 确定this，也被称为This Binding

2. 词法环境组件创建

3. 变量环境组件创建

对这一块的理解还不够，故本文不做拓展，有兴趣的朋友可以查看原文链接：

github.com/yygmind/blo…或自行查阅相关资料。

什么是执行栈？

个人理解：执行栈就是一个存储JavaScript代码执行上下文的栈，既然是栈，所以具有 LIFO（后进先出）结构，也就是JavaScript代码载入的时候，全局执行上下文入栈，然后执行函数时对应的函数执行山下文入栈，函数执行结束，该函数执行上下文出栈，最后页面关闭的时候，全局执行上下文出栈。例如下代码：

function foo(){
  function bar(){
    console.log('bar');
  };
  bar();
}
foo();
复制代码

首先全局上下文入栈

foo执行上下文入栈

bar执行上下文入栈

然后就是bar执行完毕，bar执行上下文出栈，foo执行上下文出栈，页面关闭，全局执行上下文出栈。

理解了执行栈，我们来看一个小例子：

function printN1(n){
  for(let i = 1;i<=n;i++){
    console.log(i);
  }
}
printN1(10);
function printN2(n){
  if(n){
    console.log(n);
    n -= 1;
    printN2(n);
  }
}
printN2(10);
复制代码

上面两个代码，都是打印<=n的正整数，如果忽略打印顺序的问题，哪一种实现更好呢，或者说差的那一种有什么问题呢？如果n比较小的时候你没有感觉到什么差异，那把n改为10000呢？

如果有错误或者不严谨的地方，请给予指正，十分感谢！

转载于:https://juejin.im/post/5c92474af265da60f771c103