JavaScriptの動作原理を詳細に分析し、回答します。

この記事では、JavaScript の動作原理の詳細な理論的分析と知識ポイントの共有を提供します。これに興味がある場合は、学習してください。

JavaScript は、オブジェクトベースの弱い型指定のスクリプト言語 (以下、JS と呼びます) であり、Java/C++ や他のコンパイル言語などの他のプログラミング言語とは異なります。コードが実行される前に記述され、最初にバイトコード (マシンコード) にコンパイルされます。その後、実行します。 JS はこれを行いません。JS は中間コードにコンパイルする必要はありませんが、ブラウザーで直接実行できます。JS の実行プロセスは、コンパイルと実行の 2 つの段階に分けることができます。 (書籍『あなたの知らない JS』を参照してください)、JS コントローラーが実行可能コードの一部に切り替わると (この実行可能コードはコンパイル フェーズ中に生成されます)、対応する実行コンテキスト (実行) が作成されます。コンテキストは EC と略されます）。実行コンテキストは、実行環境として理解できます（実行コンテキストは、JS インタプリタによってのみ作成でき、JS インタプリタによってのみ使用できます。ユーザーは「オブジェクト」を操作できません）。

JS の実行環境は 3 つのカテゴリに分類されます。

• グローバル環境: JS エンジンがコード ブロックに入るとき、<script>xxx</script> タグに遭遇すると、グローバル実行環境

• 関数環境: 関数が呼び出されるとき、関数内に関数実行環境が形成されます

• eval(): 文字列をJSコードとして単独で実行することは推奨されません

。

1 つの JS コード内で複数の実行コンテキストが生成されることがあります。JS では、実行コンテキストを管理するためにスタックなどのデータ構造が使用されます。スタックの特性は「先入れ、後出し、後入れ、先出し」です。この種のスタックは関数呼び出しスタックと呼ばれます。

実行コンテキストの特徴

• スタックの一番下は常にグローバル実行コンテキストです

• グローバル実行コンテキストは、ブラウザが閉じているときにのみスタックをポップアップします

• 。その他の実行コンテキスト

• の数に制限はありません。スタックの先頭は常に現在アクティブな実行コンテキストであり、残りは実行が完了するとすぐにポップされ、待機状態になります。その後、制御は次の実行コンテキストに戻ります

• 関数はそれぞれにのみ存在します。関数が呼び出されたときにのみ実行コンテキストが作成されます。関数が宣言されたときには実行コンテキストはありません。

実行コンテキストは、通常の JS オブジェクトとして明確に理解できます。実行コンテキストのライフサイクルには、大きく 2 つのステージがあります:

作成ステージ

このステージでは、主に 1. 変数オブジェクトの作成 2. の 3 つのイベントが完了します。スコープチェーンを確立する 3. このフェーズのポイントを決定する

実行フェーズ

このフェーズでは、主に変数の代入、関数の呼び出しなどの操作が完了します

変数オブジェクト(VO)の作成プロセス

• 1によると。関数パラメータに引数オブジェクトを作成して初期化し、初期値が未定義の引数オブ​​ジェクトに属性「0」、「1」、「2」、「3」などを追加し、arguments.lengthの値を設定します。渡されるパラメータの実際の数に。

• 2. 関数関数宣言を見つけて、変数オブジェクトに属性を追加します。属性名は関数名、属性値は関数の参照値です。同じ名前の関数が既に存在する場合は、それを上書きします。直接

• 3. var 変数の宣言を検索します (変数を検索する場合、関数のパラメータは var 宣言に相当するため、パラメータ名と同じ属性が VO に追加され、初期値は属性名は変数名です。同じ名前の識別子がすでに存在する場合、その識別子は処理されません。同じ名前が存在する場合、関数は変数よりも高い優先順位を持ちます。変数オブジェクト (OV) とアクティベーション オブジェクト (AO) は同じものであり、名前が異なります。作成期間中は変数オブジェクト、実行期間中はアクティブ化オブジェクトと呼ばれます。

実行コンテキストの構造は大まかに次のとおりです。コンテキストが作成されると、それはすぐに関数呼び出しスタックにプッシュされます。このとき、インタープリターは、現在の VO を与えるという 1 つのことを静かに行います。この関数は、スコープ チェーンを指す内部プロパティ [[scope]] を追加します。その上。

var g_name="tom";
var g_age=20;
function g_fn(num){
 var l_name="kity";
 var l_age=18;
 function l_fn(){
  console.log(g_name + '===' + l_name + '===' + num);
 }
}
g_fn(10);

実行フェーズ

式が見つかると、現在のスコープチェーンで VO オブジェクトが検索され、見つかった場合はそれが返されます。見つからない場合は、グローバル VO オブジェクトが終了するまで次の VO オブジェクトの検索が続けられます。

このステージでは、変数の割り当て、関数呼び出し、その他の操作を行うことができます。インタープリターは g_fn() に遭遇すると、これが関数呼び出しであることを認識し、すぐにその関数実行コンテキスト fn_EC を作成します。このコンテキスト fn_EC も同様です。 has 2 つのフェーズ

は、作成フェーズと実行フェーズです。

作成フェーズでは、関数実行コンテキストの変数オブジェクトを作成するときに、追加の引数オブ​​ジェクトが作成され、その引数オブ​​ジェクトに属性が追加されます: "0"、"1"、"2" の初期値value は未定義です、

• 関数関数の宣言を検索

• var 変数の宣言を検索

以上は、今後皆さんのお役に立てれば幸いです。

関連記事:

p5.js ゴールデンスパイラルアニメーションの実装

JSでのイベントデリゲーションの使い方を詳しく解説

Vue.jsの使い方を詳しく解説計算されたものとメソッド

以上がJavaScriptの動作原理を詳細に分析し、回答します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。