JavaScript 実行コンテキストの詳細な紹介 (コード付き)

この記事では、JavaScript 実行コンテキスト (コード付き) について詳しく説明します。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。

「JSを徹底的に学ぶ - 実行コンテキストスタック」で述べたように、JavaScriptコードが実行可能コード(実行コード)を実行すると、対応する実行コンテキスト(実行コンテキスト)が作成されます。

各実行コンテキストには、3 つの重要な属性があります:

変数オブジェクト VO

スコープ チェーン
this

この記事では、これら 3 つの部分の内容を結合します。実行コンテキストの具体的な処理プロセスについて説明します。

思考の質問

「JS の詳細な学習 - 字句スコープとダイナミック スコープ」では、次の質問が提起されています:

// 思考题一：
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()();

コードの両方の部分が出力されます

localscope ですが、まだいくつかの違いがあります。この記事では、実行コンテキストスタックと実行コンテキストの具体的な変更プロセスを詳細に分析します。

詳細な分析

コードの最初の部分を分析します:

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

実行プロセスは次のとおりです:

1. グローバル コードを実行し、グローバル実行コンテキスト、

グローバル コンテキストは実行コンテキスト スタックにプッシュされます

ECStack = [
  globalContext
];

2。グローバル コンテキストの初期化

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

2。初期化中に、checkscope 関数が作成されます属性

[[scope]]

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

3. checkScope 関数を実行して、checkScope 関数の実行コンテキストを作成します。checkScope 関数の実行コンテキストがプッシュされます。実行コンテキスト スタックに追加します:

ECStack = [
  checkscopeContext,
  globalContext
];

4. checkscope 関数はコンテキストの初期化を実行します:

1. 関数 [[scope]] 属性をコピーして、スコープ チェーン

2 を作成します。引数を使用してアクティブ オブジェクトを作成します (#3)。アクティブ オブジェクトを初期化します (つまり、仮パラメータ、関数宣言、および変数宣言を追加します) (#4)。アクティブ オブジェクトを checkscope スコープ チェーンの先頭にプッシュします (#)
##同時に、f 関数が作成され、スコープ チェーンが f 関数の内部プロパティに保存されます
[[scope]]

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

5。 f 関数を実行し、f 関数実行コンテキストを作成し、f 関数実行コンテキストを実行コンテキスト スタックにプッシュします <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  ECStack = [     fContext,     checkscopeContext,     globalContext   ]</pre><div class="contentsignin">ログイン後にコピー</div></div>6. f 関数実行コンテキストの初期化、以下はステップ 4 と同じです:

1. 関数をコピー

#[[スコープ]]

属性を使用してスコープ チェーンを作成 ##2. 引数を使用してアクティブ オブジェクトを作成 #3 .アクティブ オブジェクトを初期化します。つまり、仮パラメーター、関数宣言を追加します。 、変数宣言##4.アクティブなオブジェクトをfスコープチェーンの先頭にプッシュします

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

7.f関数が実行されると、スコープチェーン値に沿ってスコープを検索し、スコープ値を返します8. f 関数の実行後、f 関数コンテキストが実行コンテキスト スタックからポップされます

ECStack = [
  checkscopeContext,
  globalContext
]

9. checkscope 関数の実行後、checkscope 実行コンテキストが実行コンテキストからポップされますコンテキストスタック

ECStack = [
  globalContext
]

以上がJavaScript 実行コンテキストの詳細な紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。