【JS】JS中执行上下文和执行栈

最新推荐文章于 2024-07-11 22:19:38 发布

霜霖❀

最新推荐文章于 2024-07-11 22:19:38 发布

阅读量538

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xueyinglys/article/details/125357831

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

执行上下文

JS代码执行环境的抽象概念，也就是说只要有JS代码运行，就一定运行在执行上下文中

执行上下文可分为三类

全局执行上下文：只有一个，浏览器中的全局对象就是window对象，this指向这个全局对象
函数执行上下文：无数个，只有在函数被调用时才会被创建，每次调用函数就会创建一个新的执行上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用外部直接访问
Eval函数执行上下文：指运行在eval函数中的代码，很少用并不建议使用

生命周期

执行上下文的生命周期包括三个阶段：创建阶段→执行阶段→回收阶段

创建阶段

创建阶段即当函数被调用，但未执行任何其内部代码之前

创建流程：

确定this的值，也被称为this Binding。所以this的值是在执行的时候才能确认，定义的时候不能确认
词法环境被创建（LexicalEnvironment）
变量环境被创建（VariableEnvironment）

ExecutionContext = {  
 ThisBinding = <this value>,     // 确定this 
 LexicalEnvironment = { ... },   // 词法环境
 VariableEnvironment = { ... },  // 变量环境
}

词法环境

全局环境：是一个没有外部环境的词法环境，其外部环境引用为null，有一个全局对象，this的值指向这个全局对象
函数环境：用户在函数中定义的变量被存储在环境记录中，包含了arguments对象，外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境
变量环境：也是一个词法环境，词法环境和变量环境的区别在于前者存储函数声明和变量是由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);

执行上下文如下：注意：let和const定义的变量a和b在创建阶段没有被赋值(uninitialized(未初始化状态))，但var声明的变量从在创建阶段被赋值为undefined，这就是变量提升

GlobalExectionContext = {

 ThisBinding: <Global Object>,

 LexicalEnvironment: {  // 词法环境
   EnvironmentRecord: {  
     Type: "Object",  
     // 标识符绑定在这里  
     a: < uninitialized >,  
     b: < uninitialized >,  
     multiply: < func >  
   }  
   outer: <null>  
 },

 VariableEnvironment: {  // 变量环境
   EnvironmentRecord: {  
     Type: "Object",  
     // 标识符绑定在这里  
     c: undefined,  
   }  
   outer: <null>  
 }  
}

FunctionExectionContext = {  
  
 ThisBinding: <Global Object>,

 LexicalEnvironment: {  
   EnvironmentRecord: {  
     Type: "Declarative",  
     // 标识符绑定在这里  
     Arguments: {0: 20, 1: 30, length: 2},  
   },  
   outer: <GlobalLexicalEnvironment>  
 },

 VariableEnvironment: {  
   EnvironmentRecord: {  
     Type: "Declarative",  
     // 标识符绑定在这里  
     g: undefined  
   },  
   outer: <GlobalLexicalEnvironment>  
 }  
}

执行阶段

在执行阶段，执行变量赋值、代码执行，如果JS引擎在源代码声明的实际位置找不到变量的值，那么将为其分配·undefined·值

回收阶段

执行上下文出栈等待虚拟机回收执行上下文

执行栈

执行栈也叫调用栈，具有后进先出的结构，用于存储在代码执行期间创建的所有执行上下文。当JS引擎开始执行第一行脚本代码时，就会创建一个全局执行上下文然后压入执行栈中，每当引擎遇到一个函数时，就会创建一个函数执行上下文，然后将这个执行上下文压入到执行栈。引擎会执行位于执行栈栈顶的执行上下文（一般是函数执行上下文），当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程就会到达执行栈的下一个执行上下文
例子如下：

let a = 'Hello World!';
function first() {
 console.log('Inside first function');
 second();
 console.log('Again inside first function');
}
function second() {
 console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');