ある記事では、JavaScript の実行コンテキストと実行スタック (画像とテキストの組み合わせ) について詳しく説明しています。

私たちフロントエンド開発者は、JS プログラムの内部実行メカニズムを理解する必要があります。重要な概念の 1 つは です。 Js 実行コンテキストと実行スタック。実行コンテキストは、JS 言語の下位レベルの知識です。これを学習して習得することは、JS 言語の本質をより深く理解するのに役立ち、スコープを理解するのにも役立ちます。 、クロージャ、変数関連の知識を向上させます。

1 実行コンテキストとは

コードを実行する前に、ブラウザの Js エンジンはまずこれを処理するコード実行環境を作成します Jsコードの変換と実行、コードの実行環境は実行コンテキストと呼ばれます。

実行コンテキストは、現在 実行されているコード と、その実行に役立つすべての を含む抽象的な概念です。

2 分類

実行コンテキストは主に 3 つのカテゴリに分類されます:

グローバル実行コンテキスト - グローバル コードが配置される環境,
• 関数内にないコードはグローバルに実行されます。
関数実行コンテキスト - 関数が呼び出されたときに作成されるコンテキスト。
• Eval実行コンテキスト - Eval 関数 Eval のコードを実行するときに作成される環境は、次の理由により日常の開発では非常に困難です。パフォーマンスの問題 ほとんど使用されないため、ここでは説明しません。

次に、グローバル コンテキストと関数コンテキストに焦点を当てます。

2.1 グローバル実行コンテキスト

JS ファイルが実行されると、最初に作成されるのはグローバル実行コンテキストです。 。

ファイル内にコード行が存在しない場合、グローバル実行コンテキストは比較的クリーンであり、2 つのものだけが含まれます。

グローバル オブジェクト (ブラウザでは
• Window、Node 環境では Global)
this
• 変数 (グローバル オブジェクトを指す)
たとえば、この時点でファイルに何かを記述する場合は、次のコードを記述します。

var name = '小明'
var age = 18
function showName(){
  return {
      name : name,
      age : age
  }
}

The global実行コンテキストはすぐに次のようになります:

上の図からわかるように、

name

と name に明確に値を割り当てています。 年齢、何ですか? 未定義は引き続き表示されますか?これは、実行コンテキストが作成フェーズと実行フェーズの 2 つの部分に分かれているためです。

• 作成フェーズ - 実行コンテキストの初期化状態、いくつかの準備を行います
• 実行フェーズ - コードは行ごとに実行されます

上記は作成フェーズです。 グローバル コンテキストの概要。作成フェーズ中に JS エンジンは次のことを実行します。

• グローバル実行コンテキスト オブジェクトとして window を使用します
• Createthis,thispoints to window
• 変数と関数用のメモリ領域を配置します
• 変数assign unnamed、関数宣言がメモリに置かれます
• スコープ チェーンに置かれます

次に、グローバル実行コンテキストの実行フェーズに入ります。以下に示す割り当てフェーズ:

# 次の図に示すように、実行コンテキストの実行フェーズは 1 行ずつ実行されることに注意してください。

##2.2 関数実行コンテキスト完全なグローバル実行コンテキストと関数実行コンテキストについても理解します。両者の違いは主に次の 3 つの側面に反映されます:

作成タイミング: JS を実行する前にグローバル実行コンテキストが作成されます。ファイルですが、関数の実行コンテキストは

関数が呼び出されたとき
• create です。 作成頻度: グローバル コンテキストはコードの実行開始前に 1 回作成されますが、関数実行コンテキストはスクリプト内の関数への
呼び出しの数によって決定され、何度でも作成できます。 。
• 作成内容: グローバル実行コンテキストはグローバル オブジェクトとして window
を使用しますが、関数実行コンテキストはパラメーター オブジェクト
• arguments を使用します; this## が作成されました# はグローバル オブジェクトを指しませんが、関数の呼び出し方法によって異なります。 次の例を使用して、関数コンテキストのさまざまなステージのパフォーマンスを確認します。

  var name = '小明'
  var age = 18
  function showName(){
    return {
        name : name,
        age : age
    }
  }
  
  // 调用该函数
  showName()

showName

関数を呼び出すとき、次のコードを入力します。関数実行コンテキスト

作成フェーズ

における関数実行コンテキストのシナリオは次のとおりです。

次に、実行フェーズに入り、関数内のコードは、この段階で 1 行ずつ実行されます。この例では、変数の変更が含まれていないため、関数コンテキストの内容は変更されません。実行が完了すると、関数コンテキストのライフ サイクルが終了します。 。

当我们调用showName函数时，在浏览器中运行状况：

3 执行栈

我们看到当函数执行完后，其对应的执行上下文也随之消失了。这个消失的过程，我们叫它出栈——在JS代码执行过程中，JS引擎会为我们创建“执行上下文栈”。

在全局代码执行前，JS引擎为了管理执行上下文，确保程序的执行顺序。JS引擎会创建一个栈来管理所有的所有的执行上下文对象。

因为函数上下文可能会存在多个，我们不可能保留所有的上下文。当一个函数执行完毕，其对应的上下文必须让出之前所占用的资源。因此上下文的建立和销毁，就对应了一个” 入栈 “和” 出栈 “的操作。

当我们调用一个函数的时候，就会把它的上下文推入调用栈里，执行完毕后出栈，随后再为新的函数进行入栈操作。

我们通过一个例子来看一下这个过程：

function testA(){
  console.log('执行第一个测试函数的逻辑');
  testB();
  console.log('再次执行第一个测试函数的逻辑');
}

function testB(){
  console.log('执行第二个测试函数的逻辑');
}

testA()

1、执行之前，全局上下文创建：

2、testA调用，testA对应函数上下文创建：

3、testB调用，testB对应函数上下文创建：

4、testB执行完毕，对应上下文出栈，剩下testA和全局执行上下文：

5、testA执行完毕，对应执行上下文出栈，此时只剩下全局上下文：

在这整个过程里，调用栈的变化示意如下：

4 总结

• 执行上下文是什么：代码执行前，Js引擎会创建代码的执行环境，代码的执行环境称作执行上下文，包含当前正在运行的代码以及帮助其执行的所有内容。

• 全局执行上下文：（1）将window作为全局执行上下文对象（2）创建this，this 指向window（3）给变量和函数安排内存空间（4）变量赋值undefined，函数声明放入内存（5）放入作用域链

• 全局与函数执行上下文不同：（1）全局：在文件执行前创建；函数：在函数调用时创建（2）全局：只创建一次；函数：调用几次创建几次（3）将window作为全局对象；函数：创建参数对象arguments，this指向调用者

• 执行栈：管理所有的执行上下文对象

【相关推荐：javascript视频教程、编程基础视频】

以上がある記事では、JavaScript の実行コンテキストと実行スタック (画像とテキストの組み合わせ) について詳しく説明しています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。