Introduction détaillée au contexte d'exécution JavaScript (avec code)

Cet article vous apporte une introduction détaillée au contexte d'exécution de JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comme mentionné dans "Apprentissage approfondi de JS - Pile de contexte d'exécution", lorsque le code JavaScript exécute un morceau de code exécutable (code exécutable), un contexte d'exécution correspondant (contexte d'exécution) sera créé

Pour chaque contexte d'exécution, il existe trois attributs importants :

Objet variable VO (Objet variable VO)
Scope chain (Scope chain)
this

Dans cet article En combinant le contenu de ces trois parties, parlons du processus de traitement spécifique du contexte d'exécution.

Question de réflexion

Dans "Apprentissage approfondi de JS - Portée lexicale et portée dynamique", cette question est posée :

// 思考题一：
var scope = "global scope";
function checkscope(){
  var scope = "local scope";
  function f(){
    return scope;
  }
  return f();
}
checkscope();

// 思考题二：
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

Deux morceaux de code Les deux seront print local scope, mais il existe encore quelques différences. Cet article analysera en détail le processus de changement spécifique de la pile de contexte d'exécution et du contexte d'exécution .

Analyse détaillée

Nous analysons le premier morceau de code :

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

Le processus d'exécution est le suivant :

1. Et créer un contexte d'exécution global, Le contexte global est poussé dans la pile de contexte d'exécution

ECStack = [
  globalContext
];

Initialisation du contexte global

globalContext = {
  VO: [global],
  Scope: [globalContext.VO],
  this: globalContext.VO
}

2. en même temps que l'initialisation, la fonction checkscope est créée et enregistrée Chaîne de portée aux attributs à l'intérieur de la fonction [[scope]]

checkscope.[[scope]] = [
  globalContext.VO
];

3. Exécutez la fonction checkScope pour créer le contexte d'exécution de la fonction checkScope. est poussé dans la pile de contexte d'exécution :

ECStack = [
  checkscopeContext,
  globalContext
];

4. La fonction checkscope exécute l'initialisation du contexte :

1 Copiez l'attribut de la fonction [[scope]] pour créer une chaîne de portée, <.>2. Utilisez des arguments pour créer un objet actif,
3. Initialisez l'objet actif, c'est-à-dire en ajoutant des paramètres formels, des déclarations de fonction et des déclarations de variables,
4. checkscope scope chain,

En même temps, la fonction f est créée et la chaîne de portée est enregistrée dans les propriétés internes de la fonction f

[[scope]]

checkscopeContext = {
  AO: {
      arguments: {
        length: 0
      },
      scope: undefined,
      f: reference to function f(){}
  },
  Scope: [AO, globalContext.VO],
  this: undefined
}

5. Exécutez la fonction f, créez le contexte d'exécution de la fonction f, le contexte d'exécution de la fonction f est poussé dans la pile de contexte d'exécution

  ECStack = [
    fContext,
    checkscopeContext,
    globalContext
  ]

6. Initialisation du contexte d'exécution de la fonction f, ce qui suit est le même que l'étape 4 :

1. Copiez les attributs de la fonction

pour créer une chaîne de portée [[scope]] 2. Utilisez des arguments pour créer un objet actif
3. Initialisez l'objet actif, c'est-à-dire ajoutez des paramètres formels, une déclaration de fonction, une variable déclaration
4. Poussez l'objet actif en haut de la chaîne de portée f

  fContext = {
    AO: {
        arguments: {
            length: 0
        }
    },
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
    this: undefined
  }

7. La fonction f est exécutée, recherchez la valeur de portée le long de la chaîne de portée et renvoie la valeur de portée

4. 🎜>

8. La fonction f est exécutée et le contexte de la fonction f est extrait de la pile de contexte d'exécution

ECStack = [
  checkscopeContext,
  globalContext
]

9 La fonction checkscope est exécutée et le contexte d'exécution checkscope est extrait de la pile de contexte d'exécution. la pile de contexte d'exécution

ECStack = [
  globalContext
]

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!