---
description: state to track the execution progress of code.
---

# execution context

[JS](..) ⟩ [concept](../../browser/concepts) ⟩ execution context

{% hint style="success" %}
An <mark style="color:purple;">**execution context**</mark> contains whatever <mark style="color:yellow;">**implementation specific state**</mark> is necessary to <mark style="color:yellow;">**track**</mark> the <mark style="color:yellow;">**execution progress**</mark> of its associated code.&#x20;

It may contain (but not limited to) the following：

* [lexical-environment](execution-context/lexical-environment "mention") - stores variables/this ...
* <mark style="color:yellow;">**code evaluation state**</mark> - state needed to perform/suspend/resume evaluation of the code associated with this execution context.

📘 [js-spec](../../master/ref/js-spec "mention") ⟩ 8.2 [Execution Contexts](https://262.ecma-international.org/6.0/#sec-execution-contexts)
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
[instantiation](../val/func/declare/instantiation "mention")
{% endhint %}

{% hint style="info" %}
[running-execution-context](execution-context/running-execution-context "mention")

At any point in time, there is at most one execution context that is actually executing code. This is known as the _running_ execution context.&#x20;
{% endhint %}

{% hint style="info" %}
[call-stack](execution-context/call-stack "mention")&#x20;

A stack is used to track execution contexts. The running execution context is always the top element of this stack.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [running-execution-context](execution-context/running-execution-context "mention")
* [call-stack](execution-context/call-stack "mention") - track execution contexts.
* [lexical-environment](execution-context/lexical-environment "mention") - part of execution context.
* [instantiation](../val/func/declare/instantiation "mention")
{% endtab %}

{% tab title="👥 相關" %}
* [lexical-environment](execution-context/lexical-environment "mention") is <mark style="color:yellow;">**part**</mark> of <mark style="color:purple;">**execution context**</mark>.
* [instantiation](../val/func/declare/instantiation "mention") - the proccess <mark style="color:red;">**before**</mark>**&#x20;**<mark style="color:yellow;">**calling a function**</mark>.
* [scope](../scope "mention") of a code block - can reach all its parents lexical environment.
* [chain](../scope/chain "mention")
* [this](execution-context/this "mention") is a <mark style="color:yellow;">**property**</mark> of <mark style="color:purple;">**execution context**</mark> <mark style="color:yellow;">**(**</mark>more specifically, [lexical-environment](execution-context/lexical-environment "mention")<mark style="color:yellow;">**)**</mark>.
{% endtab %}

{% tab title="📗 參考" %}
* [x] Anil ⟩ [Scope, Lexical Environment and Scope Chain in JavaScript](https://medium.com/@anilakgunes/scope-lexical-environment-and-scope-chain-in-javascript-559aadb7dca8) ⭐️
* [ ] freeCodeCamp ⟩ [JavaScript Execution Context – How JS Works Behind The Scenes](https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/)
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [js-spec](../../master/ref/js-spec "mention") ⟩ [Execution Contexts](https://tc39.es/ecma262/#sec-execution-contexts)
{% endtab %}

{% tab title="🗣 討論" %}
* [What is the difference and relationship between execution context and lexical environment?](https://stackoverflow.com/questions/35759544/what-is-the-difference-and-relationship-between-execution-context-and-lexical-en)
* [Lexical environment and function scope](https://stackoverflow.com/questions/12599965/lexical-environment-and-function-scope)
{% endtab %}
{% endtabs %}
