JavaScript の仕組み

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

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

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

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

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

• eval(): 文字列を JS コードとして単独で実行します

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

実行コンテキストの特徴

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

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

• その他。実行コンテキストの数に制限はありません

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

• 関数は毎回のみ実行されます。実行コンテキストは、関数が呼び出されたときに作成されますが、関数が宣言されたときは作成されません。

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

作成ステージ

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

実行フェーズ

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

変数オブジェクト(VO)の作成処理

• 1に従って作成し初期化します。関数パラメータ引数オブジェクトの場合、初期値は未定義の引数オブ​​ジェクトに属性「0」、「1」、「2」、「3」およびその他の属性を追加し、arguments.length 値を実際に渡されるパラメータの数に設定します。で。

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

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

  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);

実行コンテキストが作成されると、すぐにプッシュされます。このとき、インタープリターは内部属性 [[scope] を現在の VO の関数に追加する] を静かに実行します。この属性は上記のスコープ チェーンを指します。

G_EC = {
 VO   : {},
 Scope_chain : [],
 this  : {}
}

/* VO的结构大概 */
VO = {
 g_name : undefined,
 g_age : undefined,
 g_fn : <函数在内存中引用值>
}

/* Scope_chain的大概结构如下 */
Scope_chain = [ G_EC.VO ] // 数组中第一个元素是当前执行上下文的VO，第二个是父执行上下文的VO,最后一个是全局执行上下文的VO,在执行阶段，会沿着这个作用域链一个一个的查找标识符，如果查到则返回，否知一直查找到全局执行上下文的VO

/* this */
this = undefined // 此时this的值是undefined

実行フェーズ

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

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

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

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

関数関数宣言を検索

var変数宣言を検索

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

React で Native を使用して画像表示コンポーネントを実装する

vue-cli と Element-ui を組み合わせて使用​​し、cropper.js に基づいて vue をカプセル化し、画像トリミング コンポーネント機能を実装する

vueでは画像のローカルプレビュー、トリミング、圧縮、アップロードなどの一連の機能をjsで実装します

以上がJavaScript の仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。