Contexte d'exécution et pile d'appels

Création d'un contexte d'exécution global pour le code de niveau supérieur, c'est-à-dire le code qui ne se trouve dans aucun fn. Par conséquent, le code en dehors du fn est exécuté en premier.
Le code à l'intérieur du corps fn de fn-decln/exprsn n'est exécuté que lorsqu'il est appelé.

Contexte d'exécution (EC)

Environnement dans lequel le morceau de JS est exécuté.
Stocke toutes les informations nécessaires à l'exécution de certains codes comme des variables locales, des arguments passés à un fn.
Le code JS s'exécute toujours à l'intérieur d'un EC.
Exactement un EC global quelle que soit la taille du projet JS.
Contexte par défaut, créé pour le code ne figurant dans aucun fn.
Ensuite, le code est exécuté à l'intérieur de l'EC global
Une fois le code de niveau supérieur exécuté, exécution de fns et attente de C/bs
Pour chaque appel fn, un nouveau EC est créé pour exécuter ce fn. Il en va de même pour les méthodes, car elles sont également des fns attachées aux objets.
Tous ces EC constituent ensemble la Call Stack.
Lorsque tous les fns sont exécutés, le moteur attend que les CB arrivent et les exécutent. Ex. cliquez sur le rappel d'événement, fourni par la boucle d'événement.

Qu'y a-t-il à l'intérieur d'EC

1. Environnement variable composé de
2. Déclarations let, const, var
3. Fonctions

4. Objet arguments : stocke tous les arguments passés au fn dans son EC.
   Chaque fn obtient son propre EC comme on l'appelle. Et les variables déclarées finissent dans un environnement variable

5. Chaîne de portée :
   Fns peut accéder à des variables en dehors de fns en utilisant la chaîne de portée.
   Contient des références aux variables situées en dehors du fn actuel et pour garder une trace de la chaîne de portée, elle est stockée dans chaque EC.

6. Chaque EC reçoit également le mot-clé 'this'.

Tous ces trois ci-dessus sont générés pendant la "phase de création", juste avant l'exécution. Ce sont les éléments nécessaires pour exécuter le code au niveau supérieur.

Pour les flèches fns EC :

Nous n'aurons pas : l'objet arguments, ce mot-clé. Les fns fléchés sont utilisés à partir de leur fn régulier le plus proche, les deux ci-dessus.

arguments : objet de type tableau, contenant tous les arguments passés dans le fn régulier, pas dans le fn fléché.

Tas de mémoire de pile d'appels = moteur JS

Pile d'appels

Endroit où les EC sont empilés les uns sur les autres, pour savoir où nous en sommes dans l'exécution. Le CE le plus élevé est celui que nous dirigeons. Une fois l'exécution terminée, elle est supprimée du haut de la pile et le contrôle est transféré à l'EC sous-jacent.
S'il existe un appel fn imbriqué, l'appel fn externe sera mis en pause afin de renvoyer le résultat de l'exécution du fn interne sur la pile d'appels car JS n'a qu'un seul thread d'exécution. Désormais, l'EC précédent deviendra l'EC actif
Ensuite, l'EC le plus haut est retiré de la pile d'appels dès son retour.
Le plus bas de la pile d'appels sera l'EC global, en haut, ce seront les appels fn au fur et à mesure qu'ils se produisent dans l'ordre.
Garantit que l’ordre d’exécution ne soit jamais perdu.
À la fin, le programme sera terminé et l'EC globale sortira également de la pile d'appels.

Le code JS s'exécute dans un EC, qui est placé sur Call Stack.

Hence, we can say that each EC has:
1. Variable environment
2. Scope chain
3. 'this' keyword

Cadrage

Comment nos variables de programme sont organisées et accessibles par JS Engine.
Où vivent les variables
Où pouvons-nous accéder à certaines variables et où pas.

Portée lexicale :

JS a une portée leicale, ce qui signifie que la portée est contrôlée par le placement des fns et des blocs dans le code.
Ex. Un fn imbriqué a accès aux variables de son fn parent.

Portée:

Espace ou env dans lequel une certaine variable est déclarée (environnement variable en cas de fns). C'est la variable env qui est stockée dans fns EC.
Pour fns, Var env et scope sont tous deux identiques.

Three scopes in JS are:
1. Global scope
2. Fn scope
3. Block scope [ES6]

Scope est un endroit où les variables sont déclarées. Par conséquent, c'est également vrai pour les Fns, car les fns ne sont que des valeurs stockées dans des variables.

Portée d'une variable

Région de notre code où une certaine variable est accessible.

La portée est différente de la portée d'une variable avec des différences subtiles.

## Global Scope:
For top level code
For variables declared outside of any fn or block which are accessible from everywhere
Variables in this scope are at the top of scope chain. Hence, can be used by every nested scope.

## Fn Scope:
Each fn has creates its own scope
Variables are accessible ONLY inside fn, NOT outside. Else Reference Error
Also called local scope
Fn decln, exprsn, arrow all three create their own scopes.
Only way to create scope using ES5 which had only fn & global scope.

## Block Scope:
Introduced in ES6, not only fn but {} also create a scope known as block scope which work only for ES6 variables i.e let-const types. DOesn't work for variables declared with 'var' as its fn scoped.
Variables accessible only inside block i.e {} 
This only applies to variables declared with let-const only.
Fns are also block scoped in ES6 (only in strict mode, should be used)
variables declared using 'var' will be accessible outside the block
Scoped to the current fn or the global scope.
var variables only care about fn, they ignore blocks. They end up in nearest fn scope.

Chaque portée imbriquée a accès aux variables de sa portée externe et de la portée globale. La même chose s'applique également aux arguments fn.

Si un fn ne trouve pas la variable dans sa portée, il recherche la chaîne de portées pour découvrir les variables dans ses portées externes. Ce processus est appelé recherche de variable dans la chaîne de portée. Cela ne fonctionne pas dans l'autre sens, c'est-à-dire que nous ne pouvons pas accéder aux variables ou aux étendues fn imbriquées depuis l'extérieur du fn ou des étendues externes.
Les portées frères et sœurs ne peuvent pas accéder aux variables les unes des autres
Seule la portée la plus interne peut accéder à ses portées extérieures, et non l'inverse.

Un EC pour chaque fn dans l'ordre exact dans lequel un fn est appelé est placé sur Call Stack avec ses variables à l'intérieur de l'EC. Global EC est au bas de la Call Stack

Scope chain:
Its all about the order in which fns are written in the code.
Has nothing to do with order in which fns were called.
Scope chain gets the variable environment from the EC.
Order of fn calls is not relevant to the scope chain at all.

const a = 'Alice';
first();

function first(){
  const b = "Hello";
  second();

  function second(){
    const c = "Hi";
    third();
  }
}

function third(){
  const d = "Hey";
  console.log(d + c + b + a); // Reference Error
}

## Call Stack order:
third() EC - top
second() EC
first() EC
global EC - bottom


Scope Chain:
second() --nested inside--> first() --nested inside--> global scope.
third() is independently defined inside gloabal scope.

Reference Error occurred because both 'c' as well as 'b' cannot be accessed using the scope chain.

Summary:
E-C, Var Env, Cl-Sk, Scope, Scope-chain are all different but related concepts.
Scoping asks the questions where do variables live, where can we access the variables and where not.
Lexical Scoping in JS: Rules of where we can access variables are based exactly where in the code fns and blocks are written.
Every scope has access to all the variables from all its outer scopes. This is scope chain which is a one-way street. An outer scope can never access variables of inner scope.
Scope chain of a certain scope is equal to adding together all the Var Envs of all the parent scopes.
Scope chain has nothing to do with the order in which fns are called. It does not affect the scope chain at all.
When a variable is not found in current scope, engine looks up the scope chain until it finds the variable its looking for. This is called variable look-up.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!