한 기사에서는 JavaScript(그림과 텍스트의 조합)의 실행 컨텍스트와 실행 스택을 자세히 설명합니다.

우리 프론트엔드 개발자는 JS 프로그램의 내부 실행 메커니즘을 이해하는 것이 필요합니다. 핵심 개념 중 하나는 Js. 실행 컨텍스트는 <code>JS 언어에 대한 하위 수준 지식입니다. 이를 배우고 익히면 JS 언어의 본질을 더 깊이 이해하는 데 도움이 되며, 또한 우리에게 도움이 될 것입니다. 범위와 종결, 변수 승격 및 기타 관련 지식을 이해합니다. JS程序内部执行机制是必要的，其中一个关键概念就是Js的执行上下文和执行栈。执行上下文是JS语言较为底层的知识，学习掌握有助于我们更深入的把握JS这门语言的本质，也有助于理解作用域、闭包、变量提升等相关知识。

1 何为执行上下文

代码执行前，浏览器的Js引擎先会创建代码执行的环境来处理此Js代码的转换和执行，代码的执行环境称为执行上下文。

执行上下文是一个抽象概念，包含当前正在运行的代码以及帮助其执行的所有内容。

2 分类

执行上下文主要分为三类：

• 全局执行上下文 —— 全局代码所处的环境，不在函数内部代码都在全局执行。
• 函数执行上下文 —— 在函数调用时创建的上下文。
• Eval执行上下文 —— 运行在Eval函数中代码时创建的环境，Eval由于性能问题在我们平时开发中很少用到，所有这里我们不在讨论。

接下来我们重点来讲全局上下文和函数上下文。

2.1 全局执行上下文

当我们的JS文件跑起来之后，首先创建的就是全局执行上下文。

当我们的文件里没有一行代码时，全局执行上下文中比较干净，只有两个东西。

• 全局对象（浏览器里是Window，Node环境下是Global）
• this变量（指向的还是全局对象）

这时候如果我们在文件里写点东西，比如我写如下代码：

var name = '小明'
var age = 18
function showName(){
  return {
      name : name,
      age : age
  }
}

全局执行上下文就会立刻变成这个样子：

上图可以看到，我们明明给name和age赋值了，咋还会显示undefined呢？这是因为执行上下文分为两部分，创建阶段和执行阶段。

• 创建阶段 —— 执行上下文的初始化状态，做一些准备工作
• 执行阶段 —— 代码一行一行执行

以上就是创建阶段的全局上下文概况，在创建阶段JS引擎将会做以下几件事：

• 将window作为全局执行上下文对象
• 创建this,this指向window
• 给变量和函数安排内存空间
• 变量赋值undefined，函数声明放入内存
• 放入作用域链

接下来才会进入了全局执行上下文的执行阶段，也就是赋值阶段，如下图：

需要注意的是执行上下文执行阶段是一行一行执行的，如下图所示：

2.2 函数执行上下文

理解完全局执行上下文，函数执行上下文也我们只需要关注它与全局上下文之间的不同即可，两者之间不同主要表现在以下三个方面：

• 创建时机：全局执行上下文在执行JS文件之前就被创建，而函数执行上下文则是在函数调用时创建。
• 创建频率：全局上下文在代码刚开始被执行前创建一次，而函数执行上下文由脚本里函数调用次数决定，可以创建无数次。
• 创建内容：全局执行上下文将window作为全局对象，而是函数执行上下文则是创建参数对象arguments;创建的this也不会指向全局对象，而是取决于函数是如何调用的。

我们通过下面这个例子来看函数上下文不同阶段的表现：

var name = '小明'
var age = 18
function showName(){
  return {
      name : name,
      age : age
  }
}

// 调用该函数
showName()

当我们调用showName

1 실행 컨텍스트란 무엇인가요?

코드를 실행하기 전에 브라우저의 Js 엔진은 먼저 이 Js를 처리하기 위한 코드 실행 환경을 만듭니다. 코드의 변환과 실행, 코드의 실행 환경을 실행 컨텍스트라고 합니다.

실행 컨텍스트는 현재

실행 중인 코드

와 코드 실행에 도움이 되는 모든

를 포함하는 추상화입니다. 🎜

🎜2 분류🎜

🎜실행 컨텍스트는 크게 세 가지 범주로 나뉩니다. 🎜

• 전역 실행 컨텍스트 - 전역 코드가 있는 환경, 🎜함수 내부의 코드가 실행되지 않음 글로벌하게🎜 .
• 함수 실행 컨텍스트 - 함수가 호출될 때 생성되는 컨텍스트입니다.
• Eval 실행 컨텍스트 - Eval 함수에서 코드를 실행할 때 생성되는 환경은 우리에서는 사용되지 않습니다. 성능 문제로 인해 일상적인 개발에서는 거의 사용되지 않으므로 여기서는 다루지 않습니다.

🎜다음으로 전역 컨텍스트와 기능 컨텍스트에 중점을 둡니다. 🎜🎜🎜2.1 전역 실행 컨텍스트🎜🎜🎜 JS 파일이 실행될 때 가장 먼저 생성되는 것은 전역 실행 컨텍스트입니다. . 🎜🎜파일에 코드 한 줄도 없으면 전역 실행 컨텍스트는 두 가지만 있으면 상대적으로 깨끗합니다. 🎜

• 전역 개체(브라우저의 창, 노드 환경의 전역)
• 이 변수(전역 개체를 가리킴)

🎜예를 들어 지금 파일에 무언가를 쓰면 다음 코드를 작성합니다.🎜

function testA(){
  console.log('执行第一个测试函数的逻辑');
  testB();
  console.log('再次执行第一个测试函数的逻辑');
}

function testB(){
  console.log('执行第二个测试函数的逻辑');
}

testA()

🎜전역 실행 컨텍스트는 즉시 다음과 같습니다: 🎜🎜🎜🎜위 그림에서 볼 수 있듯이 이름과 나이에 값을 명확하게 할당했는데 왜 가 정의되지 않았나요? 가 계속 표시되나요? 이는 실행 컨텍스트가 생성 단계와 실행 단계의 두 부분으로 나누어져 있기 때문입니다. 🎜

• 생성 단계 - 실행 컨텍스트의 초기화 상태, 몇 가지 준비를 수행합니다.
• 실행 단계 - 코드가 한 줄씩 실행됩니다.

🎜위는 다음과 같습니다. 생성 단계 전역 컨텍스트 개요, 생성 단계 동안 JS 엔진은 다음 작업을 수행합니다: 🎜

• window를 전역 실행 컨텍스트 객체로 사용
this 만들기, this는 창을 가리킵니다.
• 변수와 함수를 위한 메모리 공간 배열
• 변수 할당 정의되지 않음, 함수 선언이 메모리에 배치됨
• 스코프 체인에 배치

🎜그런 다음 전역 실행 단계 아래와 같이 실행 컨텍스트가 입력됩니다. 🎜🎜🎜🎜다음 그림과 같이 실행 컨텍스트 실행 단계는 한 줄씩 실행된다는 점에 유의해야 합니다. 🎜🎜🎜🎜🎜2.2 함수 실행 컨텍스트🎜🎜🎜 전체 전역 실행 컨텍스트와 함수 실행 컨텍스트를 이해하려면 전역 컨텍스트와 차이점에만 주의하면 됩니다. 둘의 차이점은 주로 다음과 같습니다. 🎜

• 생성 시점: 전역 실행 컨텍스트는 JS 파일을 실행하기 전에 생성되고, 함수 실행 컨텍스트는 함수가 호출될 때 생성됩니다.
• 생성 빈도: 전역 컨텍스트는 코드 실행이 시작되기 전에 한 번 생성되는 반면, 함수 실행 컨텍스트는 스크립트에서 함수 호출 횟수에 따라 결정되며 수없이 생성될 수 있습니다.
• 콘텐츠 생성: 전역 실행 컨텍스트는 window를 전역 개체로 사용하지만 함수 실행 컨텍스트는 매개변수 개체 arguments를 사용합니다. this 역시 전역 개체를 가리키지 않지만 함수가 호출되는 방식에 따라 달라집니다.

🎜다음 예를 사용하여 다양한 단계에서 함수 컨텍스트의 성능을 확인합니다. 🎜rrreee🎜 showName 함수를 호출할 때 🎜creation을 입력합니다. 함수 실행 컨텍스트 🎜 단계에서 함수 실행 컨텍스트의 장면은 다음과 같습니다. 🎜🎜🎜🎜🎜 그러면 실행 단계로 들어갑니다. 이 단계에서는 함수의 코드가 한 줄씩 실행됩니다. 예를 들어 관련된 변수 수정이 없기 때문에 함수 컨텍스트 내용은 변경되지 않고 유지되며 실행이 완료되면 함수 컨텍스트의 수명 주기가 종료됩니다. 🎜

当我们调用showName函数时，在浏览器中运行状况：

3 执行栈

我们看到当函数执行完后，其对应的执行上下文也随之消失了。这个消失的过程，我们叫它出栈——在JS代码执行过程中，JS引擎会为我们创建“执行上下文栈”。

在全局代码执行前，JS引擎为了管理执行上下文，确保程序的执行顺序。JS引擎会创建一个栈来管理所有的所有的执行上下文对象。

因为函数上下文可能会存在多个，我们不可能保留所有的上下文。当一个函数执行完毕，其对应的上下文必须让出之前所占用的资源。因此上下文的建立和销毁，就对应了一个” 入栈 “和” 出栈 “的操作。

当我们调用一个函数的时候，就会把它的上下文推入调用栈里，执行完毕后出栈，随后再为新的函数进行入栈操作。

我们通过一个例子来看一下这个过程：

function testA(){
  console.log('执行第一个测试函数的逻辑');
  testB();
  console.log('再次执行第一个测试函数的逻辑');
}

function testB(){
  console.log('执行第二个测试函数的逻辑');
}

testA()

1、执行之前，全局上下文创建：

2、testA调用，testA对应函数上下文创建：

3、testB调用，testB对应函数上下文创建：

4、testB执行完毕，对应上下文出栈，剩下testA和全局执行上下文：

5、testA执行完毕，对应执行上下文出栈，此时只剩下全局上下文：

在这整个过程里，调用栈的变化示意如下：

4 总结

• 执行上下文是什么：代码执行前，Js引擎会创建代码的执行环境，代码的执行环境称作执行上下文，包含当前正在运行的代码以及帮助其执行的所有内容。

• 全局执行上下文：（1）将window作为全局执行上下文对象（2）创建this，this 指向window（3）给变量和函数安排内存空间（4）变量赋值undefined，函数声明放入内存（5）放入作用域链

• 全局与函数执行上下文不同：（1）全局：在文件执行前创建；函数：在函数调用时创建（2）全局：只创建一次；函数：调用几次创建几次（3）将window作为全局对象；函数：创建参数对象arguments，this指向调用者

• 执行栈：管理所有的执行上下文对象

【相关推荐：javascript视频教程、编程基础视频】

위 내용은 한 기사에서는 JavaScript(그림과 텍스트의 조합)의 실행 컨텍스트와 실행 스택을 자세히 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!