Nous savons tous que l'ordre du code d'exécution JS sera toujours différent de l'ordre du code, la tête question de côté asynchrone, vous trouverez que même le code de synchronisation, son exécution est également incompatible avec vos attentes, telles que:

fonction F1 () { 
    le console.log ( 'entendre le vent du vent' ); 
}; 
F1 (); // echo 

fonction F1 () { 
    le console.log ( 'echo' ); 
}; 
F1 (); // echo

la sortie doit d' abord entendre le vent est le vent, puis les poissons d'écho de sortie, selon l'ordre écrit de code, malheureusement, les deux sorties sont l' écho, si nous déclarons une fonction dans l'expression de la fonction de changement de code ci - dessus , les résultats ne sont pas les mêmes:

var F1 = fonction () { 
    le console.log ( 'entendre le vent du vent' ); 
}; 
F1 (); // entendre le vent est le vent 

var F1 = fonction () { 
    le console.log ( 'echo' ); 
}; 
F1 (); // echo

Cela montre que le code a dû se produire quelques changements subtils avant l'exécution, le moteur JS réellement fait quoi que ce soit? Cela doit mentionner le contexte d'exécution JS.

JS contexte d'exécution

le code JS avant l'exécution, le moteur JS toujours faire un travail de préparation, en fait, le travail est de créer un contexte d'exécution correspondant;

contexte d'exécution et seulement trois catégories, contexte d'exécution global, le contexte de la fonction et le contexte eval , eval est généralement pas en raison de l'utilisation, pas discuté ici.

1. Le contexte d'exécution global

Seul un contexte d'exécution globale, le client est généralement créé par le navigateur , et est connu objet fenêtre, nous avons un accès direct à travers cela.

fenêtre objet global sur un certain nombre de méthodes et propriétés prédéfinies, nous pouvons accéder directement à ces méthodes dans une propriété à l'environnement mondial, tout en soutien des variables globales objet fenêtre ou déclaration var . Nous var créé par objet global, directement accessible par la fenêtre.

2. Le contexte d'exécution de la fonction

contexte d'exécution de la fonction , il peut y avoir plusieurs, chaque fois qu'une fonction est appelée crée un contexte de fonction ; Notez que, en appelant la même fonction va créer un nouveau contexte .

Cela dit , vous voulez différents types de contexte, et le nombre est encore tellement de choses à créer une relation entre la façon dont ils sont, mais aussi qui va gérer le contexte de celui - ci, qui devait parler du contexte d'exécution empiler .

pile de contexte d'exécution (pile d'exécution)

pile de contexte d'exécution (pile d'exécution ci-après abrégé), également connu sous la pile d'appel, tous les contextes créés pour la pile d'exécution au cours du code d'exécution mémorisée, la caractéristique LIFO ayant (a avancé arrière Last In First Out) de.

Code JS première manche, va créer un contexte d'exécution globale et pressé dans la pile d'exécution , puis à chaque fois qu'une fonction est appelée, va créer un nouveau contexte d'exécution de la fonction et de la pression à l'intérieur de la pile; en raison des caractéristiques de l'exécution LIFO,

Il peut être compris comme, au fond de la pile avant l'exécution du code JS est terminé pour toujours un contexte d'exécution global .

fonction f1 () { 
    f2 (); 
    console.log ( 1 ); 
}; 

fonction f2 () { 
    f3 (); 
    console.log ( 2 ); 
}; 

fonction f3 () { 
    console.log ( 3 ); 
}; 

f1 (); // 3 2 1

Nous expliquons la relation entre la pile et en effectuant le code de contexte d'exécution de processus ci - dessus, pour faciliter la compréhension, nous avons l'illusion de la pile d'exécution est un tableau , dans l'exécution initiale du code va créer un contexte d'exécution global sur la pile et processus ainsi est suit comme:

// avant que le code est exécuté pour créer un contexte d'exécution global 
ECStack = [GlobalContext];

// f1 appel 
ECStack.push ( 'f1 functionContext' );

// f1 et appels f2, f2 est terminée avant que l'exécution ne peut pas consoler 1 
ECStack.push ( 'F2 functionContext' );

// F2 a appelé f3, incapable de console 2 avant f3 terminé 
ECStack.push ( 'f3 functionContext' );

// F3 est terminée, la sortie de la pile 3 et 
ECStack.pop ();

// F2 est terminée, la sortie de la pile 2 et 
ECStack.pop ();

// F1 est terminée, la sortie 1 et la pile 
ECStack.pop ();

// A cette époque, une seule pile d' exécution contexte d'exécution global

Donc, ici, nous expliquons les règles de la pile d'exécution et le contexte d'exécution du magasin, rappelez-vous mon code mentionné précédent est exécuté avant que le moteur JS, il sera prêt à créer le contexte d'exécution, en particulier comment créer, nous sommes allés à dire.

contexte d'exécution phase de création

Créer un contexte d'exécution divisé phase de création et la phase de mise en œuvre deux étapes , plus difficile à comprendre devrait être la phase de création, nous commençons par phase de création.

JS phase de création de contexte d'exécution est responsable de trois choses:

1. Déterminer ce

2. Créer un environnement lexical (LexicalEnvironment)

3. Créer un environnement variable (VariableEnvironment)

Ici, je vais apprendre des autres les données traduis pseudo-code, pour représenter le processus de création:

= ExecutionContext {  
     // déterminer cette valeur 
    la ThisBinding = < cette valeur> ,
     // Créer un environnement lexical 
    du LexicalEnvironment = {},
     // créer un environnement variable de 
    la VariableEnvironment = {}, 
};

Si vous avez lu d' autres articles sur le contexte d'exécution doit avoir lu cette question , le contexte d'exécution du processus de création ne doit pas expliquer cela, la portée des poissons objet variable / objet actifs font , comment dire d' autres endroits avec pas les mêmes, ce Je l' expliquerai plus tard.

1. Déterminer ce

L'appel officiel pour cette liaison, le contexte d'exécution globale, cela montre toujours l'objet global, tels que l'environnement du navigateur ce point à l'objet de la fenêtre.

Dans le cadre de la mise en œuvre de la fonction, en fonction de la valeur de cette fonction est appelée, si un objet est invoqué, cela fait référence à l'objet. Dans le cas contraire, cela indique généralement la fenêtre globale de l'objet ou non défini (mode strict).

2. Environnement lexicales

environnement lexicale contenant un identifiant de configuration de mappage de variable, l'identificateur indique l' endroit où le nom de la variable / fonction , la variable est une fonction de l'objet réel comprend [] objet de type ou une référence à la valeur d' origine. (Cela ne peut pas lire)

environnement lexical dans l'environnement lexical global et la fonction environnement lexical deux types

Mondiaux lexicales environnements:

Présentation de l'enregistrement de l' environnement externe est nul, car elle est la couche la plus externe de l'environnement lui - même, sauf qu'il contient toutes les propriétés de la méthode d'objet global , et de l' objet global (déclarée par var) défini par l' utilisateur.

Lexicales environnement Fonctions:

Il comprend toutes les variables de la fonction définie par l' utilisateur , mais comprend également un objet d'arguments . environnement fonction lexicales environnement extérieur peut être introduit dans l'environnement mondial, l'environnement peut être d' autres fonctions , conformément à c'est le code réel.

// environnement global 
GlobalExectionContext = {
     // global lexicales Environnement 
    du LexicalEnvironment: {
         // Environnement enregistrement 
        EnvironmentRecord: { 
            Type: "Objet", // le type de l'environnement d'objet enregistrement 
            // identifiant de liaison Ici 
        }, 
        extérieur: < null > 
    } 
}; 
// fonction de la température ambiante 
FunctionExectionContext = {
     // fonction environnement lexical 
    du LexicalEnvironment: {
         // environnement enregistrement 
        EnvironmentRecord: { 
            type: "déclaratif", // environnement type déclaratif enregistrement
            // identifiant de liaison ici 
        }, 
        externe: <Inscription gratuite ou outerfunction environnement Référence> 
    } 
};

3. Variables d'environnement

Les variables d'environnement peuvent aussi dire que l'environnement lexical, il a tous les attributs de l' environnement lexical , tout comme l'introduction des dossiers environnementaux et l'environnement extérieur. La seule différence réside dans l'environnement lexical pour ES6 stockage variable et laisser instruction de déclaration de fonction const , et la variable stockée dans la variable d'environnement var simplement déclaré.

Nous devons les comprendre par un groupe de pseudo-code:

nous a = 20 ;  
const b = 30 ;  
var c; 

fonction de multiplication (e, f) {  
  var g = 20 ;  
 retour e * f * g;  
} 

C = multiplication (20, 30);

Nous pseudocode pour décrire le processus de création de l'exécution de code ci-dessus contexte:

nous a = 20 ;  
const b = 30 ;  
var c; 

fonction de multiplication (e, f) {  
  var g = 20 ;  
 retour e * f * g;  
} 

C = multiplication (20, 30);

Nous pseudocode pour décrire le processus de création de l'exécution de code ci-dessus contexte:

// contexte global d'exécution 
GlobalExectionContext = {
     // l'objet global cet lié à 
    la ThisBinding: <Object Inscription gratuite> ,
     // environnement lexical 
    du LexicalEnvironment: {  
         // Environnement enregistrement 
      EnvironmentRecord: {   
        Type: "objet",   // objet Environnement Enregistrez 
        @ identifier une variable de liaison créé ici laisse const ab dans laquelle 
        a: <uninitialized> ,   
        B: <uninitialized> ,   
        Multiplier: <FUNC>   
      } 
      // environnement global environnement extérieur est introduit comme nulle 
      externe: < null >   
    },
  
    Le VariableEnvironment: {   
      EnvironmentRecord: {   
        Type: "Objet",   // l'environnement objet enregistrement 
        // identifiant de liaison c var créé dans cette 
        c: non défini,   
      } 
      // environnement global environnement extérieur est introduit comme nulle 
      externe: < null >   
    }   
  }

  // contexte d'exécution fonction 
  FunctionExectionContext = {
      // Parce que cette fonction est appelée par défaut de liaison objet global est également 
    le ThisBinding: <, Ltd Rejoignez libre objet> ,
     // lexicales Environnement 
    du LexicalEnvironment: {   
      EnvironmentRecord: {   
        Type: « déclaratif »,   // environnement déclarative enregistrement 
        // identifiant les arguments de liaison ici que l'objet dans 
        les arguments: {0: 20 est 1 ,.: 30, longueur: 2 },   
      },   
      // environnement extérieur est introduit dans le dossier </ inscription gratuite> 
      externe: <GlobalEnvironment>   
    }, 
  
    le VariableEnvironment : {   
      EnvironmentRecord: {   
        type: "déclaratif",   //record environnement déclarative 
        // identifiant de liaison var créé dans cette g 
        g: non défini   
      },   
      // environnement extérieur est introduit dans le dossier </ Inscription gratuite> 
      Extérieur: <GlobalEnvironment>   
    }   
  }

Je ne sais pas vous ne trouvez pas, créez une étape dans le contexte d'exécution, déclaration de fonction variable avec le var a déclaré dans la phase de création a été donné une valeur, instruction var est définie sur undefined, la fonction est définie pour ses propres fonctions, et laissez const est réglé sur non initialisée.

Maintenant, vous savez toujours les variables afin d'améliorer les déclarations de fonction à l'avance comment il était, et pourquoi laisser const Pourquoi avoir une zone morte temporaire, parce que le champ est créé à la fois la phase d'initialisation du moteur JS mission différente.

En plus de créer le contexte de la scène, ainsi que la phase de mise en œuvre, que nous devrions mieux compris, lorsque le code correspondant est exécuté conformément à dossier environnemental avant la cession, comme stade précoce dans la création de var est indéfini, s'il y a une valeur correspondante est affectée, comme Apprécions const non initialisée, si la valeur est attribuée sans valeur est donnée non défini.

résumé

1. Le contexte d'exécution global est généralement créé par le navigateur, il va créer l'exécution de code, le contexte d'exécution est créée fonction uniquement lorsque la fonction est appelée, combien combien de fois un contexte d'appel de fonction est créée.

2. La pile d'appel est utilisé pour stocker tout le contexte d'exécution, pour répondre à la règle FILO.

3. Est-ce la phase d'établissement de contexte est divisé en liant cela, créer un environnement lexical, la variable d'environnement en trois étapes, deux différence est que la variable d'environnement lexical pour stocker la déclaration de fonction avec déclaration const let, mais ne stocke que la variable d'environnement déclaration variable var.

4. Environnement Enregistrez deux parties lexicales principalement introduite par l'environnement d'enregistrement et l'environnement extérieur composé, le contexte mondial, et les fonctions de contexte introduisant l'environnement extérieur n'est pas le même enregistrement, le zéro global, la fonction est une fonction de l'environnement mondial ou tout autre environnement. dossiers environnementaux ne sont pas les mêmes, le bilan environnemental global appelé objets, fonctions, appelé environnement déclarative enregistrement.

5. Vous devez comprendre pourquoi il y a une levée variable, fonction améliorée, mais ne laissez pas const.

Concept avant 6.ES3 objets variables et objets actifs après ES5 être expliqué par l'environnement lexical, les variables d'environnement, les deux ne sont pas incompatibles avec le concept, qui est plus de compréhension conviviale.

Quel est le contexte de l'exécution JS?