Front-end avancé (2) : diagramme de contexte d'exécution

Mettons d'abord une image

Nous rencontrons souvent des variables d'évaluationdans les premiers stades de l'apprentissage JS ou pendant entretiens Réfléchir à des questions sur l'amélioration. Par exemple, commençons par un plus simple.

console.log(a);   // 这里会打印出什么？
var a = 20;

Ignorant cet exemple pour l'instant, introduisons le concept le plus basique mais aussi le plus important en JavaScriptContexte d'exécution (Contexte d'exécution) .

Chaque fois que le contrôleur passe en code exécutable, il entrera dans un contexte d'exécution. Le contexte d'exécution peut être compris comme l'environnement d'exécution du code actuel, qui forme une portée. L'environnement d'exécution en JavaScript comprend grossièrement trois situations.

• Environnement global : le code JavaScript entrera d'abord dans cet environnement lors de l'exécution de

• Fonction environnement : lorsque la fonction est appelée , il sera exécuté Quand, il entrera dans la fonction en cours pour exécuter le code

• eval

Par conséquent, dans un programme JavaScript, plusieurs Les contextes d'exécution doivent être générés. Comme mentionné dans mon dernier article, le moteur JavaScript va les traiter sous la forme d'une pile. Cette pile est appelée pile d'appels de fonction (call stack). Le bas de la pile est toujours le contexte global et le haut de la pile est le contexte en cours d'exécution.

Lorsque le code rencontre les trois situations ci-dessus lors de l'exécution, un contexte d'exécution sera généré et placé sur la pile. Une fois le contexte en haut de la pile exécuté, il sortira automatiquement de la pile. Afin de mieux comprendre ce processus, nous allons vous le montrer à partir des exemples et schémas suivants.

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

Nous utilisons ECStack pour représenter la pile qui gère les groupes de contexte d'exécution. Nous pouvons facilement savoir que la première étape consiste à pousser le contexte global sur la pile.

Étape 1 : Pousser le contexte global sur la pile

Une fois le contexte global poussé sur la pile, le code exécutable qu'il contient démarre pour s'exécuter jusqu'à ce qu'elle rencontre changeColor(), cette phrase active la fonction changeColor pour créer son propre contexte d'exécution, donc la deuxième étape consiste à pousser le contexte d'exécution de changeColor sur la pile.

Étape 2 : Le contexte d'exécution de changeColor est poussé sur la pile

Une fois le contexte de changeColor poussé sur la pile, le contrôleur commence à exécuter le code exécutable qu'il contient, un autre contexte d'exécution est activé après avoir rencontré swapColors(). Par conséquent, la troisième étape consiste à pousser le contexte d’exécution de swapColors sur la pile.

Étape 3 : Le contexte d'exécution de swapColors est poussé sur la pile

Dans le code exécutable de swapColors, aucun autre contexte d'exécution n'est rencontré . contexte, donc ce code est exécuté avec succès et le contexte de swapColors est extrait de la pile.

Étape 4 : Le contexte d'exécution de swapColors sort de la pile

Une fois le contexte d'exécution de swapColors affiché, continuez à exécuter l'exécutable code de changeColor, également Aucun autre contexte d'exécution n'est rencontré et il apparaît après une exécution réussie. De cette façon, il n'y a qu'un contexte global dans ECStack.

Étape 5 : Le contexte d'exécution de changeColor est extrait de la pile

Le contexte global est extrait de la pile après l'ouverture de la fenêtre du navigateur fermé.

Remarque : dans une fonction, rencontrer return peut directement mettre fin à l'exécution du code exécutable, de sorte que le contexte actuel sera extrait directement de la pile.

L'ensemble du processus

Après avoir compris ce processus en détail, nous pouvons résumer quelques conclusions sur le contexte d'exécution.

• Thread unique

• Exécution synchrone, seul le contexte en haut de la pile est en cours d'exécution, les autres contextes doivent attendre

• Il n'y a qu'un seul contexte global, qui apparaît à la fermeture du navigateur

• Il n'y a pas de limite au nombre de contextes d'exécution d'une fonction

• Chaque fois qu'une fonction est appelée, un nouveau contexte d'exécution sera créé pour elle, même s'il s'agit de la fonction appelante elle-même.

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;
}
var result=f1();
result(); // 999

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。

上例演变过程

如果你在某公众号看到我的文章，然后发现下面的评论说最后一个例子错了，请不要管他们，他们把函数调用栈和作用域链没有分清楚就跑出来质疑，真的很有问题。建议大家读一读这系列的第六篇文章，教你如何自己拥有判断对错的能力。

下一篇文章继续总结执行上下文的创建过程与变量对象，求持续关注与，谢谢大家。

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!