JS基础-执行上下文和执行栈

我心飞翔 分类:javascript

一、执行上下文

概念

执行上下文是评估和执行js代码的环境的抽象概念,每当js代码在运行的时候,都是在执行上下文中运行

类型

  • 全局执行上下文

默认的上下文,不在函数内的代码都在全局上下文中。它会创建一个全局的window对象,并设置this的值等于这个对象。

  • 函数执行上下文

当一个函数被调用时,会为函数创建一个新的执行上下文。每个函数都有自己的执行上下文。每当一个新的上下文被创建,她会按照定义的顺序执行一系列操作。

  • Eval函数执行上下文

执行在eval内部的代码也会有自己的执行上下文。

二、执行栈

执行栈是一种拥有LIFO(先进后出)数据结构的栈,被用来管理代码运行时创建的所有执行上下文。

js引擎运行时,会创建一个全局执行上下文并压如当前执行栈。每当引擎遇到一个函数调用,会为函数创建一个新的执行上下文并压入栈顶。

引擎会先执行位于栈顶的函数,当函数执行结束时,执行上下文从栈中弹出,开始执行栈中的下一个上下文。

三、执行上下文是怎么产生的

创建阶段

  1. this值的绑定
全局执行上下文中,this值为全局对象,函数执行上下文中,this值取决于函数时如何被调用的。如果被一个对象调用,this指向这个对象,否则被设置为全局对象或者undefined
 
  1. 创建词法环境

词法环境由两个部分组成

  • 环境记录,存储变量和函数声明
  • 对外部环境的引用,可以通过它访问外部词法环境

环境记录由两个部分组成

  • 声明式环境记录器: 存储变量、函数和参数、主要用于函数、catch词法环境。
  • 对象环境记录器:主要用于with和全局的词法环境

词法环境两种类型

  • 全局环境 环境记录器是对象环境记录器
  • 函数环境 环境记录器是生命式函数记录器
  1. 创建变量环境

变量环境也是词法环境,主要区别是词法环境用于存储函数声明和变量(let和const声明的变量),变量环境仅用于存储变量(通过var声明的变量)

注: es3 规范和es5略有不同

ES3 规范:

① 创建作用域链。

② 创建变量对象 VO(包括参数,函数,变量)。

③ 确定 this 的值。
 

执行阶段

执行阶段完成对变量的分配,最后执行代码。

伪代码示例

let a = 20;  
const b = 30;  
var c;

function d(e, f) {  
 var g = 20;  
 return e * f * g;  
}

c = d(20, 30);
 
// 全局环境
GlobalExectionContext = {

  this: <Global Object>,
    // 词法环境
  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  // 环境记录分类: 对象环境记录
      a: < uninitialized >,  // 未初始化
      b: < uninitialized >,  
      d: < func >  
    }  
    outer: <null>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  // 环境记录分类: 对象环境记录
      c: undefined,  // undefined
    }  
    outer: <null>  
  }  
}
// 函数环境
FunctionExectionContext = {  

  this: <Global Object>,

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  // 环境记录分类: 声明环境记录
      Arguments: {0: 20, 1: 30, length: 2},  // 函数环境下,环境记录比全局环境下的环境记录多了argument对象
    },  
    outer: <GlobalLexicalEnvironment>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  // 环境记录分类: 声明环境记录
      g: undefined  
    },  
    outer: <GlobalLexicalEnvironment>  
  }  
}
 

例子

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

// 执行栈的变化
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();
 
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

// 执行栈的变化
ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();
 

参考文章

[译] 理解 JavaScript 中的执行上下文和执行栈

「JS-Learning」理解JS执行环境

回复

我来回复
  • 暂无回复内容