이 문서에서는 Javascript의 실행 컨텍스트, 실행 스택 및 이벤트 루프를 안내합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
다음 개념은 실행 컨텍스트이든 실행 스택이든, 사양에 포함된 개념은 매우 추상적이며, 많은 내용의 이해는 어떤 내용에 따라 달라집니다. 사실 모두 상상에 의한 내용이므로 틀린 부분이 있으면 정정 부탁드립니다. 执行上下文、 还是执行栈，它在规范中的概念都很抽象，很多内容的理解实际靠的都是想象力，若有错误之处，还请指正。
执行上下文
简而言之，执行上下文（Execution Context）是正在运行的可执行代码所处环境的抽象，用于追踪一段代码中变量的求值。这是我总结过来的概念，可能有些不准确，也可以参考真正的规范定义。
不过总的来说，有三个关键点：
只有可执行代码才会有执行上下文
执行上下文是有状态的：运行状态（Perform）、挂起状态（Suspend）以及恢复（Resume）。处于Perfrom状态的执行上下文称之为运行时执行上下文（Running Execution Context）
执行上下文完全不等价于词法环境，硬说关系，也只是前者引用了后者而已。
执行一个JS脚本时，可以有多个执行上下文存在，但是 运行时上下文只有唯一一个（异步也是如此，至于为什么提了四个……三大天王有四个不是常识么……）。
并且ES规范中规定，可执行代码有下面几个：
全局代码
函数代码
Eval语句
模块代码
换言之，看以下代码：
var g=111
function f(){
console.log(g);
for(let i =0; i <p>如果上面的代码运行，只会产生两个执行上下文：</p>全局
函数f
但是如果将标注(*)的行注释掉，那么最终只有一个执行上下文，因为函数f根本就不会执行，自然就不会有相应的执行上下文了。里面唯一一个迷惑的是，就是for-loop了，但它根本不是可执行代码，所以它是函数执行上下文的一部分。
执行上下文的重要组成部分
一个执行上下文，可以抽象为：
ExecutionContext = {
State:
LexEnv = {
This: ,
OuterEnv: ,
DecRec:{
//... identifiername-variable
}
}
VaEnv = {
This: ,
OuterEnv: ,
VarRec:{
//... identifiername-variable
}
}
}事实上，在一个执行上下文中有两个相当重要的组件：LexicalEnvironmentComponent（词法环境组件）和VariableEnvironmentComponent（变量环境组件）。词法环境组件指向当前代码中的词法环境（LexEnv）， 变量环境组件指向当前代码的变量环境（VarEnv）。
关于执行上下文不得不说的二三事中，有一个很重要的部分就是作用域链，但是在执行上下文中并没有看到相关内容。不过作用域链的确存在，它就在[[Scope]]内部属性中，通过浏览器可以直接看到。
不过也可以这样理解，在一个执行上下文被创建时，不仅会创建当前词法环境的LexEnv，也会创建LexEnv.OutEnv、LexEnv.OutEnv.OutEnv…，直至延伸到全局为止。
执行上下文的创建与销毁
1、创建一个新执行上下文（ExecutionContext , EC）
2、创建当前词法环境（LexEnv 和 VarEnv ）
3、将该执行上下文的 LexicalEnvironmentComponent 和 VariableEnvironmentComponent 指向当前环境下的 LexEnv 和 VarEnv中。
4、将新执行上下文推入 执行栈中，并成为运行时执行上下文。
5、对可执行代码块内的标识符进行实例化和初始化：
收集当前词法环境内所有声明的标识符归入DecRec中，所有var声明的标识符归入VarNames集合中，在此阶段会进行标识符名检测，若与let/const/...声明的标识符与VarNames中的标识符重复， 报错。
将DecRec中的标识符进行实例化，并设为uninitialized。VarNames中的标识符绑定在ObjRec中，实例化后直接初始化为undefined
var temp = 10;
console.log('push task1');
setTimeout(function task1(){
temp+=10;
console.log(temp+'task1 okay! ');
},1000)
console.log('taskquenue=[task1]; push task2');
setTimeout(function task2(){
temp*=10;
console.log(temp+'task2 okay! ');
},500)
console.log('taskquenue=[task1,task2]; push task3');
setTimeout(function task3(){
temp*= -0.2;
console.log(temp+'task3 okay! ');
},1500)
console.log('taskquenue=[task1, task2,task3]');f🎜(*)라고 표시된 줄을 주석 처리하면 end, 왜냐하면 f 함수는 전혀 실행되지 않을 것이고 당연히 상응하는 실행 컨텍스트도 없을 것이기 때문입니다. 여기서 유일하게 혼란스러운 점은 for-loop이지만 전혀 실행 가능한 코드가 아니므로 함수 실행 컨텍스트의 일부라는 것입니다. 🎜🎜실행 컨텍스트의 중요한 구성 요소🎜🎜실행 컨텍스트는 다음과 같이 추상화될 수 있습니다: 🎜push task1 taskquenue=[task1]; push task2 taskquenue=[task1,task2]; push task3 taskquenue=[task1, task2,task3] 100task2 okay! 110task1 okay! -22task3 okay!
LexicalEnvironmentComponent code> ( 어휘 환경 구성 요소) 및 <code>VariableEnvironmentComponent(가변 환경 구성 요소). 어휘 환경 구성요소는 현재 코드의 어휘 환경(LexEnv)을 가리키고, 가변 환경 구성요소는 현재 코드.strong>VarEnv(VarEnv). 🎜🎜실행 컨텍스트에 대해 말씀드리고 싶은 두세 가지 중에서 매우 중요한 부분이 스코프 체인이지만 실행 컨텍스트에서는 제가 관련 내용을 보지 못했습니다. 그러나 범위 체인은 [[Scope]] 내부 속성에 있으며 브라우저를 통해 직접 볼 수 있습니다. 🎜🎜하지만 이렇게도 이해할 수 있습니다. 실행 컨텍스트가 생성되면 현재 어휘 환경의 LexEnv뿐만 아니라 LexEnv.OutEnv도 생성됩니다. 그리고 전 세계로 확장될 때까지 LexEnv가 생성됩니다. .OutEnv.OutEnv… 🎜🎜실행 컨텍스트 생성 및 삭제🎜🎜1. 새로운 실행 컨텍스트 생성(ExecutionContext, EC) 🎜🎜2. 현재 어휘 환경 생성(LexEnv 및 VarEnv) 🎜🎜3. context LexicalEnvironmentComponent 및 VariableEnvironmentComponent는 현재 환경의 LexEnv 및 VarEnv를 가리킵니다. 🎜🎜4. 새 실행 컨텍스트를 실행 스택으로 푸시하고 런타임 실행 컨텍스트가 됩니다. 🎜🎜5. 실행 가능한 코드 블록 내에서 식별자를 인스턴스화하고 초기화합니다. 🎜var에 의해 선언된 모든 식별자는 VarNames 컬렉션에 배치됩니다. 이 단계에서는 식별자 이름 Strong> 감지 시, let/const/...에 의해 선언된 식별자가 VarNames의 식별자와 동일하면 오류가 보고됩니다. 🎜
DecRec에서 식별자를 인스턴스화하고 초기화되지 않음으로 설정합니다. VarNames의 식별자는 ObjRec에 바인딩되고 인스턴스화 후 undefine으로 직접 초기화됩니다. 🎜对于function声明的函数，将直接指向函数对象，并也会绑定到ObjRec中，这是浏览器默认行为。
6、运行代码。
非var声明的标识符会在声明处进行初始化（默认为undefined）。
完成所有变量的赋值，并可能会一直在变化。
7、运行完毕从 执行栈 中弹出。
备注：
This绑定，大部分情况可以用过去的说法解释，然而某些情况下却不尽然。执行栈与事件循环
执行栈（Execution Stack）就是由执行上下文构成的堆栈，类似于Call Stack。
1、当Javascript引擎遇到一段可执行代码时，新建一个执行上下文。
2、将它推入执行栈中。并设置为运行时执行上下文。
3、执行上下文运行完毕，弹出销毁恢复并将原执行上下文设为运行时。
总觉得这些没什么好说的，但是水一下吧
执行栈最重要的部分并非是执行栈概念本身，而是与任务队列的关系，它是事件循环的入门关键概念之一。
众所周知，Javascript语言是单线程的，此处的执行栈就相当于主线程的调用栈，也是唯一一个调用栈，至于什么是主线程可以查阅相关资料，这里有些超纲了……
那么javascript是如何实现异步的？
确切来说，这不是Javascript核心的部分，它是结合浏览器API（如Web Worker， Browser-context了解一下）实现的。
在事件循环中（事件处理过程），有两个极其重要的概念：
这两个概念，是抽象滴。
在Javascript中，一个任务也可以称之为事件，通常是一个函数回调，由许多任务组成的队列，就是所谓的任务序列了。任务序列有很多分类，例如：作业序列（Job Quenue）、消息序列（Message Quenue），本质没区别。
不必再深入了解，现在需要记住的是：一个任务序列中的任务如果想要被执行，就必须将它取出放入执行栈中。
例如下面的代码：
var temp = 10;
console.log('push task1');
setTimeout(function task1(){
temp+=10;
console.log(temp+'task1 okay! ');
},1000)
console.log('taskquenue=[task1]; push task2');
setTimeout(function task2(){
temp*=10;
console.log(temp+'task2 okay! ');
},500)
console.log('taskquenue=[task1,task2]; push task3');
setTimeout(function task3(){
temp*= -0.2;
console.log(temp+'task3 okay! ');
},1500)
console.log('taskquenue=[task1, task2,task3]');输出如下：
push task1 taskquenue=[task1]; push task2 taskquenue=[task1,task2]; push task3 taskquenue=[task1, task2,task3] 100task2 okay! 110task1 okay! -22task3 okay!
setTimeout是一个定时器，它能够将任务放到任务队列中。如图：
task1：
task2：
task3：
执行到此处， task1、task2和task3都被放入了任务队列； 然后执行栈全部执行完毕后，开始处理任务队列中的任务。
为什么任务队列中的任务必须在执行栈空时后执行呢？
C++나 Java 같은 멀티스레드 언어나 운영체제의 내용을 살펴보세요. C++、Java这类多线程的语言或是看看操作系统这方面的内容。现在开始处理任务吧：
task2：
task1：
task3
비즈니스 구현지금 작업 처리 시작:
task2 처리 중: 
task1 처리 중: 
task3 처리 중:
이것은 단순한 예일 뿐입니다이벤트 루프에는 여러 개의 작업 대기열이 있을 수 있습니다.작업 순서는 마이크로 작업 순서와 매크로 작업 순서의 두 가지 유형으로 나뉩니다.우리의 스크립트 코드는 매크로 작업 중 하나입니다. 시퀀스.
마지막으로: Javascript Engine이것은 Intensive Reading Javascript Series
의 세 번째 부분입니다. 예기치 않게 도착했습니다Event Loop. 합리적인 프로그래밍을 위해 대부분의 문서는 작업 순서
와Javascript 엔진에 대해 더 관심이 있으시면 다음을 참조하세요:
🎜🎜단, 초보자가 V8을 보는 것은 극히 권장되지 않습니다. 소스코드 한번에 저런🎜 머리가 아프고 온몸이 떨리네요🎜너무 즐겁네요...🎜🎜🎜추천 튜토리얼:🎜JavaScript 영상 튜토리얼🎜🎜🎜🎜🎜위 내용은 JS의 실행 컨텍스트, 실행 스택 및 이벤트 루프 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
