JavaScript执行上下文原理解析

JavaScript执行上下文分析

前端开发过程中经常会遇到作用域的问题，变量提升，闭包等等一些列的问题，那么这些问题的是怎么形成的，又是如何实现的，这里通过分析JavaScript中的执行上下文（EC）依次解开。

代码思考

var name = 'globalName';
function F1() {
    console.log(name);
    console.log(F2);
    var name = 'f1ame';
    function F2(argumentName) {
    	console.log(argumentName);
	}
	F2(name);
    console.log(sex);
}
F1();

乍一看可能会认为控制台会输出

 console.log(name); // globalName
 console.log(F2); // not defined
 console.log(argumentName); // f1ame
 console.log(sex); // not defined

其实不然，上面代码执行下来的结果是

 console.log(name); // undefined
 console.log(F2); // F2(name) {console.log(name);}
 console.log(argumentName); // f1ame
 console.log(sex); // not defined

ECS（执行环境栈-Execution Context Stack）

那么输出这些的原因是什么？下面来分析一下，在分析之前，先来看一下JavaScript的压栈规则LIFO（last in first out）。当代码执行时，开始将全局上下文入ECS。当指定到函数调用时，便将函数上下文入ECS。函数上下文可以有多个，当调用时，就将调用的入ECS，运行完成时，再将函数上下文出ECS。例如上方的代码，开始执行时，全局上下文入ECS，执行到F1调用时，将函数上下文F1入ECS，F1中调用F2时，再将F2入ECS，F2执行完成后出ECS等等。具体如下图

执行上下文形成

在JavaScript中代码的运行环境，也叫执行上下文，也就是传说中的作用域。在执行上下文（以下简称EC）中包含以下内容

1. 作用域链Scope Chain
2. 变量对象
3. this指向

EC有三种，这里主要讲前两种

1. 全局上下文
   在JavaScript中只拥有一个全局上下文，代码最先进入的环境，在页面关闭时销毁
2. 函数上下文
   在函数被调用时的执行环境
3. eval
   此函数会对参数执行，会产生自己的上下文

下面具体讲接下EC如何形成的，EC分为两个阶段，一个创建阶段，一个执行阶段

• 创建阶段（该阶段主要分为三步）
  1. 创建作用域（Scope Chain），由当前EC和上层EC等一系列变量对象组成的层级链
  2. 创建（变量对象VO）包含参数、函数、变量
  3. this绑定（指向调用的对象）

	第二部分VO（变量对象）创建详情：
 		初始化创建arguments：赋值；
 		声明function：赋值；
 		声明变量：undefined

• 执行阶段
  1. 顺序执行代码
  2. 变量对象赋值（在这里才赋值到变量）

以上便是一个EC的形成，接下来看一下F1函数上下文在创建阶段时什么样

对比EC过程，进行代码详情解析

F1EC: {
  VO: {
    Arguments: {
      // 这里便是初始化argument，有参数的话，便在这里创建
      length: 0
    },
    // 变量对象
    VO: {
      //声明引用 F2
      F2: <function fn2 reference>,
      //声明name
      name: undefined
    }
  },
  // 确定作用域链
  scopeChain: [F1EC.VO, global],
  //bindthis指向
  this: window
}

当创建阶段完成以后，接下来就是执行阶段，下面具体分析下这段代码

// 创建全局上下文，入上下文执行栈
var name = 'globalName';
function F1() {
  // 第一阶段进行后
  // 这里this指向window
  // name被创建，但是未赋值
  //F2被创建并且引用
  console.log(name); // 那么这里应该是undefined
  console.log(F2); // 这里应该是 F2
  var name = 'f1ame'; // 再此之后，则name可以访问到
  
  function F2(argumentName) {
    console.log(argumentName);
  }

  // 创建F2上下文，入上下文执行栈 同理
  F2(name);

  //F2 出栈
  console.log(sex); //sex未创建，未赋值，且作用域链中也没有，所以报错 sex not defined
}
// 创建F1上下文，入上下文执行栈
F1();
// F1出栈
// 全局上下文出栈

通过上面的分析，这段代码运行结果就正确了，从这段代码中在衍生出几个JavaScript中创建的词汇解析

变量提升

在这里可以看到name与F2都在console.log之后才定义，但是，console.log却能够访问到。通过上面的分析可知，在代码执行之前，就已 经创建了VO对象并且函数已经赋值引用。这里就说明了变量提升的原理

闭包

实例解析

全局执行上下文中无法访问局部上下文中的变量，但是可以通过闭包来实现。下面F2函数就是闭包，F2作用域链是F2、F1、window

function F1() {
  var name = 'f1name';
  function F2() {
  	// 访问F2、F1、window
  	console.log(name); //f1name
  }
  return F2
}
F1()()
// 访问全局作用域
console.log(name) // not defined

分析两道经典代码片段

第一题

var name = "The Window";

var obj = {
  name: "My Object",
  F1: function () {
    console.log(this); //指向调用的obj，这里是obj
    return function () {
      return this.name;
    };
  }
};

var res = obj.F1(); //obj调用

console.log(res()); //window调用，所以this.name === window.name

第二题

var name = "The Window";

var obj = {
  name: "My Object",
  F1: function () {
    console.log(this); //指向调用的obj，这里是obj
    var that = this; // 指向obj，这里that指向obj
    return function () {
      // that依赖F1执行上下文，所以这里that.name = My Object
      return that.name;
    };
  }
};

var res = obj.F1();

console.log(res()); //that.name === obj.name

分析作用域

通过console.dir分别将两题返回的res函数打印出来

• 第一题
  
  由图可见Scopes只存在Global一个作用域，因为return function () { return this.name; };并不存在依赖F1作用域的局部变量，所以这里只存在Global一个作用域。再加上调用res函数的上层对象的this指向全局作用域Global，所以第一题的this.name的值为，全局作用域Global里面的name：The Window。
• 第二题
  
  由图可见Scopes存在两个作用域，因为在闭包环境下，res函数中的变量依赖F1作用域的局部变量that，所以这里多出来一个Closure (F1)的作用域。当调用res变量时，打印that.name的值。that存在作用域Closure (F1)中，顺着作用域往上找，Closure (F1)作用域中that.name：My Object。