1. 実行コンテキストとは何かコードは特定の環境で実行されます。これを実行環境または実行コンテキストと呼びます。さまざまな実行環境に応じて、次の 3 つのカテゴリに分類できます。 グローバル実行環境: コードが最初に実行されるときのデフォルトの環境 関数実行環境: 実行フローが関数本体に入るたびに eval実行環境: eval関数内のテキストが実行されると 2. 実行コンテキスト スタックとは何ですか?これは「スタック」であるため、「スタック」の特性、つまり先入後出のデータ構造に準拠している必要があります。コードの一部を見てみましょう: 関数cat(a){ もし(a<0){ false を返します。 } console.log('スタックにプッシュ:'+a); 猫(a-1); console.log('ポップアウト:'+a); } 猫(3); // スタックにプッシュ: 3 // スタックにプッシュ: 2 // スタックにプッシュ: 1 // スタックにプッシュ: 0 // スタックをポップ: 0 // ポップ: 1 // ポップ: 2 // ポップ: 3 上記のコードの実行プロセスを分析してみましょう。 ① ブラウザがロードされると、プログラムはグローバル実行コンテキストに入り、それをスタックにプッシュします(最初に入るもの、つまり最下層)。この実行コンテキストの下には関数 cat が 1 つだけあり、cat call、パラメータ 3 です。 ② プログラムはcat関数に入り、つまり関数の実行コンテキストに入り、それをスタックにプッシュします(2番目に入るもの、つまり最後から2番目のレイヤー)。パラメータ3は0より大きいため、実行を継続し、「Push stack: 3」を出力します。 ③プログラムは実行を継続し、関数catを呼び出し、再び新しい関数実行コンテキストに入り、パラメータa-1を使用してスタック(3番目のエントリ、最後から3番目の層)にプッシュし続け、ステップ②をループします。ここで、関数cat(a-1)が呼び出されるため、次のコード行「Pop: a」(この時点でaはまだ3です)、つまり「Pop: 3」が一時的に取り残され、スタックの最後から2番目の層に存在することに注意してください。 ④ ②③を繰り返して、「Push: 2」、「Push: 1」、「Push: 0」を順に出力します。同時に、取り残される出力は、「Pop: 2(スタックの下から3番目の層)」、「Pop: 1(スタックの下から4番目の層)」、「Pop: 0(スタックの下から5番目の層)」です。 ⑤ スタックの特性に応じて、残っている4つの出力項目が「スタックにプッシュ:3」、「スタックにプッシュ:2」、「スタックにプッシュ:1」、「スタックにプッシュ:0」の順に出力されます。 3. 実行コンテキストスタック処理の詳細関数が呼び出されるたびに、新しいコンテキストが実行されることは既に知られています。各実行コンテキストは、作成フェーズと実行フェーズの 2 つのフェーズに分かれています。作成フェーズ: プログラムが関数を呼び出すが、コードが実行されないフェーズを指します。 1. 作成フェーズこの段階で関数が呼び出されると、実行コンテキスト オブジェクト (executionContextObj) が作成されます。このオブジェクトには、スコープ チェーン オブジェクト (scopeChain)、変数オブジェクト (variableObject、VO と呼ばれます)、およびこのオブジェクトの 3 つのオブジェクトが含まれます。VO には、変数宣言 (variable)、関数宣言 (function)、パラメーター (arguments) などが含まれます。 ステップ2: パラメータ、関数、変数を作成する ステップ3: コンテキストの「this」の値を決定する 次のコードを使用して上記の手順をさらに分析してみましょう。 関数cat(名前) { var a = '年々'; var b = 関数 () {}; this.name = 名前; 関数c() { コンソールにログ出力します。 } c(); } cat('魚がいる'); このコードが関数 cat('有鱼') を呼び出すと、実行コンテキストは作成フェーズになり、コードは次のように解析されます。 cat実行コンテキストオブジェクト = { scopeChain: { ... }, // 1. スコープチェーンを作成し、スタックメモリを割り当てます。variableObject: { 2. 変数オブジェクトを作成します。arguments: { // 2.1 パラメータ 0 を解析します: '魚がいます', 長さ: 1 }, name: '有鱼', // 2.1 パラメータを解析し、パラメータ名を作成し、パラメータを割り当てます c: function c() // 2.2 関数宣言 c を見つけ、c を属性として使用し、関数 c を値として使用します a: undefined, // 2.3 変数宣言 a を見つけ、undefined に初期化します。この段階では宣言部分のみを見て、値を割り当てません b: undefined // 2.3 変数宣言 b を見つけ、undefined に初期化します。この段階では宣言部分のみを見て、値を割り当てません }, this: { 3. このオブジェクトを作成する this:cat('有鱼') // 3.1 この呼び出しのオブジェクトを指す name:undefined // 3.2 オブジェクトのプロパティ name は undefined に初期化される }; c() //関数 c の実行コンテキストに再度入ります。cat 関数と同じですが、まだ展開されていません。} コード分析を通じて、次のような結論を導き出すことができます。 ①3つのステップの順序は間違えてはいけない ②VOステップでは関数宣言を先に実行し、次に変数宣言を実行する ③この段階ではパラメータのみ割り当て可能で、変数と関数は宣言のみ可能 2. 実装この段階では、js インタープリターはコンテキスト内の関数コードを実行し、js コードを 1 行ずつ実行し、変数に値を割り当てます。 cat実行コンテキストオブジェクト = { スコープチェーン: { ... }, 変数オブジェクト: { 引数: { 0: 「魚がいる」 長さ: 1 }, 名前: 「魚がいる」 c: 関数c()、 a: '年年', // 変数 a に値が割り当てられます b: 関数 b // 変数 b に値が割り当てられます }, this: { 3. このオブジェクトを作成します this:cat('There is fish') name:'有鱼' // オブジェクト属性名に値を割り当てる} } 以上がJavaScriptにおける実行コンテキストとコールスタックの詳細な説明です。JavaScriptにおける実行コンテキストとコールスタックの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: Docker Compose を使用して nginx のロード バランシングを実装する方法
この記事では、Vueの計算プロパティ実装レポートカードを参考に共有します。具体的な内容は次のとおりで...
目次1. 異なるリクエストパスに応じて異なるデータを返す方法を学びます。 2. 送信データ: データ...
<br />2006年10月12日のNetEaseの新ホームページの公開から、2008年...
MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコードMySQL シーケ...
この記事では、MySQL のマルチテーブル共同クエリ操作について説明します。ご参考までに、詳細は以下...
1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...
みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...
シェル スクリプト言語は、すべてのプログラミング言語の中で最も単純な言語であるため、資格のある Li...
この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考まで...
目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...
1. リバースプロキシの例1 1. 効果を達成する(1)ブラウザを開き、www.123.comと入力...
序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...
vuex 永続状態基本原則: すべての vuex データをローカルストレージに保存し、ページが更新さ...
目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...
インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...