フロントエンド応用編(2): 実行コンテキスト図

最初に写真を載せておきます

JSの学習の初期段階や面接中に、変数の改善に関する質問によく遭遇します。たとえば、より単純なものから始めましょう。

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

今回はこの例を無視して、JavaScript実行コンテキストの最も基本的でありながら最も重要な概念を紹介しましょう。

コントローラーが実行可能コードに切り替わるたびに、実行コンテキストに入ります。実行コンテキストは、スコープを形成する現在のコードの実行環境として理解できます。 JavaScript の実行環境には大きく分けて 3 つの状況があります。

• グローバル環境: JavaScript コードは実行時に最初にこの環境に入ります

• 関数環境: 関数が呼び出されて実行されると、現在の関数に入ってコードを実行します

• eval

前回の記事で述べたように、JavaScript プログラムでは必然的に複数の実行コンテキストが生成されます。このスタックは関数呼び出しスタック (c

all

スタック) と呼ばれます。スタックの最下位は常にグローバル コンテキストであり、スタックの最上位は現在実行中のコンテキストです。 コードの実行中に上記の 3 つの状況が発生すると、実行コンテキストが生成され、スタックに配置され、スタックの一番上のコンテキストが実行された後、スタックから自動的に飛び出します。このプロセスをより明確に理解するために、次の例と図に基づいて説明します。

var color = 'blue';

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

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

    swapColors();
}

changeColor();

実行コンテキスト グループを処理するスタックを表すために ECStack を使用します。最初のステップはグローバル コンテキストをスタックにプッシュすることであることが簡単にわかります。

ステップ 1: グローバル コンテキストをスタックにプッシュする

グローバル コンテキストがスタックにプッシュされると、その中の実行可能コードが changeColor() に遭遇するまで実行を開始します。この文は関数 changeColor をアクティブにし、独自の実行コンテキストを作成します。そのため、2 番目のステップでは、changeColor の実行コンテキストをスタックにプッシュします。

changeColor()，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。

第二步：changeColor的执行上下文入栈

changeColor的上下文入栈之后，控制器开始执行其中的可执行代码，遇到swapColors()

ステップ 2:changeColor の実行コンテキストをスタックにプッシュします

changeColor のコンテキストがスタックにプッシュされた後、コントローラーは実行可能コードの実行を開始し、swapColors() 実行コンテキスト。したがって、3 番目のステップでは、swapColors の実行コンテキストをスタックにプッシュします。 <p class="image-caption"></p> <p></p> <p class="image-package"><img src="https://img.php.cn/upload/article/000/000/164/1497854dccb7773ab3fff0f062c686c5-2.png" alt="フロントエンド応用編(2): 実行コンテキスト図" >ステップ 3: swapColors の実行コンテキストがスタックにプッシュされます<br></p> swapColors の実行可能コードには、実行コンテキストを生成できる他の状況がないため、このコードは正常に実行され、 swapColors はスタックからの Pop からのものです。 <p class="image-caption"></p> <p></p> <p class="image-package"><img src="https://img.php.cn/upload/article/000/000/164/1497854dccb7773ab3fff0f062c686c5-1.png" alt="フロントエンド応用編(2): 実行コンテキスト図" >ステップ 4: swapColors の実行コンテキストをポップする<br></p> swapColors の実行コンテキストがポップアップした後、changeColor の実行可能コードを実行し続けます。実行が成功すると、他の実行コンテキストはポップアップしません。 。このように、ECStack にはグローバル コンテキストのみが存在します。 <p class="image-caption"></p> <p></p> <blockquote><p>ステップ 5:changeColor の実行コンテキストがスタックからポップされます<a href="http://www.php.cn/wiki/135.html" target="_blank"></a> ブラウザ ウィンドウが閉じられた後、グローバル コンテキストがスタックからポップされます。 </p></blockquote> <p class="image-package">注: 関数内で <img src="https://img.php.cn/upload/article/000/000/164/d185827a13241f90f091b627788234bb-0.png" alt="フロントエンド応用編(2): 実行コンテキスト図" >return<br> が発生すると、実行可能コードの実行が直接終了する可能性があるため、現在のコンテキストはスタックから直接ポップされます。 </p> <p class="image-caption"></p> <p></p> <ul class=" list-paddingleft-2"> <li>プロセス全体<p></p> このプロセスを詳細に理解した後、実行コンテキストに関するいくつかの結論を要約できます。 </li> <li> <p></p>シングルスレッド</li> <li> <p></p>同期実行、スタックの最上位のコンテキストのみが実行され、他のコンテキストは待機する必要があります</li> <li> <p></p>グローバルコンテキストは1つだけあり、ブラウザの起動時にスタックからポップアウトされますは閉じられています</li> <li> <p></p>関数 実行コンテキストの数に制限はありません🎜🎜🎜🎜関数が呼び出されるたびに、呼び出し元の関数自体であっても、その関数に対して新しい実行コンテキストが作成されます。 🎜</li> </ul> <p>为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。</p> <pre class="brush:php;toolbar:false">function f1(){     var n=999;     function f2(){         alert(n);      }     return f2; } var result=f1(); result(); // 999</pre> <p>因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。</p> <p class="image-package"><img src="https://img.php.cn/upload/article/000/000/164/918e9801293aa5390684bfc1911790eb-7.png" alt="フロントエンド応用編(2): 実行コンテキスト図" ><br></p> <p class="image-caption">上例演变过程</p> <blockquote><p>如果你在某公众号看到我的文章，然后发现下面的评论说最后一个例子错了，请不要管他们，他们把函数调用栈和作用域链没有分清楚就跑出来质疑，真的很有问题。建议大家读一读这系列的第六篇文章，教你如何自己拥有判断对错的能力。</p></blockquote> <p>下一篇文章继续总结执行上下文的创建过程与变量<a href="http://www.php.cn/wiki/60.html" target="_blank">对象</a>，求持续关注与，谢谢大家。</p> <p><br></p>

以上がフロントエンド応用編(2): 実行コンテキスト図の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。