Javascript の実行コンテキストについて説明する記事-jsチュートリアル-php.cn

Javascript の実行コンテキストについて説明する記事

青灯夜游

リリース： 2023-02-14 19:41:06

転載

2383 人が閲覧しました

この記事では、JavaScript の実行コンテキストについて説明し、思考の質問を共有します。思考の質問の分析を通じて、実行コンテキストについての理解がさらに深まることでしょう。

Javascript の実行コンテキストについて説明する記事

これまでの記事では、実行コンテキストの 3 つの重要なメンバー、変数オブジェクト、スコープチェーン、this について詳しく理解しました。まず4つの記事の内容をまとめて、散在していた知識を集約し、シンプルにまとめました。前回の記事からここに来た人がいるかわかりませんが、前回の記事で疑問が残りました。その疑問を分析することで、実行コンテキストをより深く理解していきます。

思考の質問

ケースを少し複雑にするために、いくつかの修正が加えられていますが、元の質問で検討された点は変更されていません。

function func(value){
    getValue = function(){
        console.log(value);
    };
    return this
}
            
function getValue(){
    console.log(5);
}

Func(1).getValue(); //为什么是1呢？

ログイン後にコピー

特定の実行分析

グローバルコードを実行し、グローバル実行コンテキストを作成すると、グローバルコンテキストが実行コンテキストスタックにプッシュされます

ECStack = [ globalContext ];

ログイン後にコピー

グローバルコンテキストを初期化します

globalContext = {
    VO: {
        func: reference to function func(){},
        getValue: reference to function getValue(){}
    },
    Scope: [globalContext.VO],
    this: globalContext.VO //全局上下文
}

ログイン後にコピー

グローバルコンテキストを初期化すると 2 つの関数が同時に作成されるため、その親スコープチェーンも内部プロパティ [[scope]]

func.[[scope]] = [
     globalContext.VO
];
getValue.[[scope]] = [
     globalContext.VO
];

ログイン後にコピー

に保存されます。時刻、コードの実行が開始されます。最後のステートメントが実行されると、最初に func 関数が実行され、ステップバイステップの func 関数実行コンテキストが作成されます。

Copy function [[scope ]] 属性を使用してスコープチェーンを作成します
引数を使用してアクティブオブジェクトを作成します
##アクティブオブジェクトを初期化します

funcContext = {
    AO: {
        arguments: { // 数组
            0: 1,
            length: 1
        }
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}

ログイン後にコピー

関数実行コンテキストを作成し、実行コンテキストスタックにプッシュします。

    ECStack = [
        funcContext,
        globalContext
    ];

ログイン後にコピー

関数が実行を開始します。これが、

なぜ最終出力が 1

であるのかを知るための鍵です。最初の文の代入操作、次に実行コンテキストに沿って変数 getValue を見つける必要があります。次に funcContext のスコープを見てみましょう。まず funcContext.AO を見つけます。明らかに getValue 属性は存在しません。次にスコープチェーンに沿って調べて見つけます。 globalContext.VO、getValueが見つかりました。このとき、グローバルスコープのgetValue属性が再割り当てされます。割り当てられるのは新しいバージョンの関数であり、関数スコープが再作成され、この親が割り当てられます新しい getValue 関数が再割り当てされます。レベルスコープチェーンは内部プロパティ [[scope]]:

getValue .[[scope]] = [ funcContext.AO, globalContext.VO ];

ログイン後にコピー

に格納されます。次に、これを返し続け、funcContext のこれを見つけます。つまり、未定義の関数実行コンテキストを返します。 Pops

ECStack = [ globalContext ];

ログイン後にコピー

実行を続行

Func(1).getValue()

、前半は未定義を返します。このとき、システムは暗黙的にグローバル変数オブジェクトに変換し、そこから getValue 属性を見つけます。グローバル変数オブジェクト。この時点で、getValue はもう当時の少年ではないことがわかりました。新しい getValue の関数実行コンテキストがスタックにプッシュされました: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">getValueContext = { AO: { arguments: { // 数组 length: 0 } }, Scope: [ AO, funcContext.AO, globalContext.VO ], this: undefined } ECStack = [ getValueContext, globalContext ];</pre><div class="contentsignin">ログイン後にコピー</div></div> 関数が実行を開始し、出力したいことがわかりました。 value<p>, スコープに沿って探します。getValueContext.AO にはそのような属性はありません。検索を続けて funcContext.AO を見つけます (<code>Note!)。値が見つかった場合は、仮パラメータに入力すると、対応する値が出力されます。関数の実行後、getValueContext と globalContext がスタックからポップされて次々に破棄され、コードが完成します。

概要