ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript 実行コンテキストの詳細な説明

JavaScript 実行コンテキストの詳細な説明

韦小宝
韦小宝オリジナル
2018-03-14 16:02:491324ブラウズ

この記事では JavaScript コンテキストを実行する方法について説明します。JavaScript 実行コンテキストについて知らない場合、または JavaScript 実行コンテキストに興味がある場合は、この記事を見てみましょう。 point

背景: 関数と変数のプロモーション、スコープなどの質問は、面接で頻繁に遭遇します。原理を深く理解したい場合は、まず関数実行コンテキストと実行コンテキストの 2 つの概念を理解する必要があります。スタック。

もう一度、スタックのデータ構造を紹介しましょう:


一言でまとめると、新しいデータがスタックの一番上からプッシュされ、ポップアップします。データもスタックの最上位からポップされます。これは、いわゆるマガジンの原則です。

1. 実行コンテキスト

実行コンテキストは、スコープを形成する現在のコードの実行環境として理解できます。 JavaScriptの実行環境には大きく分けて3つの状況が含まれます。

グローバル環境: JavaScript コードは、実行時に最初にこの環境に入ります

関数環境: 関数が呼び出されて実行されると、現在の関数に入り、コードを実行します

eval (非推奨) 、無視できます)

2. 実行コンテキスト スタック


JavaScript は単一のスレッドで実行されるため、スタックの最下位は常にグローバル コンテキストであり、最上位は実行のためにキューに入れられます。スタックの現在実行中のコンテキストです。ブラウザーがグローバル コードの実行を開始すると、まず固有のグローバル実行コンテキストを作成し、それを実行スタックの先頭にプッシュします (ブラウザーが閉じているときにポップされます)。新しい関数実行コンテキストを作成し、それに応じて実行スタックの先頭にプッシュします。現在の関数が完了すると、現在の関数の実行コンテキストがスタックの先頭からポップされ、ガベージ コレクション

を待ちます。

3. 実行コンテキストの

ライフサイクル

; 作成 --> 実行 -->

作成フェーズ
:

A 変数オブジェクトを作成します。まず、function引数のパラメータを初期化し、関数宣言を初期化し、変数を初期化します(未定義)。 関数の優先度

が変数の

よりも高い場合、変数が関数と同じ名前を持つ場合、その変数は無視されます。 a

引数オブジェクトを作成し、コンテキストを確認し、パラメータ名と値を初期化し、参照のコピーを作成します。

b (関数式の代わりに) 関数宣言のコンテキストをスキャンします

1. 関数が見つかるたびに、変数オブジェクトに属性を作成します--- - - 正確には関数の名前 - 属性値はメモリ内の関数のアドレスへの参照です。

2.上記の関数名がvariableObjectの下にすでに存在する場合、対応する属性値は新しい参照によって上書きされます。

c 変数宣言のコンテキストをスキャンします

1 変数宣言が見つかるたびに、変数オブジェクト、つまり 変数名 文字に属性が作成されます。 、変数の値は未定義に初期化されます

d。コンテキスト内で this のポイントを決定します

Bスコープチェーンを作成します

ステージ:

割り当て、コード実行

リサイクル フェーズ:

実行コンテキスト スタックは、ガベージ コレクション メカニズムがコンテキストをリサイクルするのを待ちます

ケース: (次のコードは、実行コンテキスト スタックの動作原理を説明するために使用されます)

	//变量声明
	var a1 = 9,
	a2 = 8,
	a3 = "sss",
	b1 = {name:"xixi"};

	//函数调用
	a1 = f1(a1,a2);
	
	//函数声明
	function f1(a,b){
		//f1函数的执行上下文
		/*
			1.扫描参数: a = 9 b = 8
			2.扫描函数声明 f2 = function(){}
			3.扫描变量声明 t = undefined , m = undefined , i = undefined
		*/
		var t = 0,
		m = 10;

		for(var i=0;i<a;i++){
			console.log(i);
		}

		function f2(){
			console.log("f2");
		}

		return a+b;
	}

環境スタックの概略図:


あまり詳しくない場合でも、両方の側面を簡単にマスターできます自分で!関連する推奨事項: 进 フロントエンドの上級 (2): コンテキスト ダイアグラムを実行する

JavaScript 変数ターゲット 2 番目: さまざまな実行での VO 基本 上級 (2):

実行コンテキスト

詳細な図

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。