> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/scope/chain.md).

# scope chain

[JS](/web/js.md) ⟩ [concepts](/web/browser/concepts.md) ⟩ [scope](/web/js/scope.md) ⟩ scope chain

{% hint style="success" %}
when a [module](/web/js/module.md)/[function](/web/js/val/func.md)/[block](/web/js/grammar/statement/other/block.md) is <mark style="color:orange;">**defined**</mark>, a <mark style="color:yellow;">**new**</mark> [scope](/web/js/scope.md) is created. The positioning of scopes <mark style="color:yellow;">**nested inside one another**</mark> creates a scope hierarchy called the <mark style="color:purple;">**scope chain**</mark>.&#x20;
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
The [scope](/web/js/scope.md) of a <mark style="color:yellow;">**code block**</mark> can reach all its <mark style="color:yellow;">**parent's**</mark> [lexical environment](/web/js/concept/execution-context/lexical-environment.md) so it can use its parent’s [variable](/web/js/variable.md)(s). In this way, we have a [scope chain](/web/js/scope/chain.md), chain of all parent’s [scope](/web/js/scope.md).
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* [lexical environment](/web/js/concept/execution-context/lexical-environment.md)
* [scope](/web/js/scope.md)
* [lexical environment vs. scope](/web/js/scope/lexical-environment-vs.-scope.md)
* [lexical scope](/web/js/scope/lexical-scope.md) - static scope
* [execution context](/web/js/concept/execution-context.md)
  {% endtab %}

{% tab title="🔴 主題" %}

* [LHS reference](/web/js/variable/access/lhs.md) - find the [variable](/web/js/variable.md) <mark style="color:orange;">**container**</mark> <mark style="color:yellow;">**itself**</mark> (in the <mark style="color:purple;">**scope chain**</mark>).
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩ Chapter 3: [The Scope Chain](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch3.md#chapter-3-the-scope-chain)
* [x] Anil ⟩ [Scope, Lexical Environment and Scope Chain in JavaScript](https://medium.com/@anilakgunes/scope-lexical-environment-and-scope-chain-in-javascript-559aadb7dca8) ⭐️
  {% endtab %}

{% tab title="❓" %}
{% hint style="warning" %}
Q：[lexical environment](/web/js/concept/execution-context/lexical-environment.md) === [scope](/web/js/scope.md):question:
{% endhint %}

{% hint style="info" %}
A：my understanding is that&#x20;

* ([global](/web/js/scope/global.md)/[module](/web/js/scope/module.md)/[function](/web/js/scope/function.md)/[block](/web/js/grammar/statement/other/block/block.md)) [scope](/web/js/scope.md) is <mark style="color:yellow;">**determined**</mark> at [compile-time](/web/js/compile/compile-time.md).
* [lexical environment](/web/js/concept/execution-context/lexical-environment.md) is <mark style="color:yellow;">**created**</mark> at [runtime](/web/js/compile/runtime.md), <mark style="color:red;">**every time**</mark>**&#x20;**<mark style="color:yellow;">**a**</mark>**&#x20;**<mark style="color:orange;">**scope**</mark>**&#x20;**<mark style="color:yellow;">**is entered**</mark>:exclamation:
  {% endhint %}
  {% endtab %}
  {% endtabs %}