JavaScript スコープチェーン分析_JavaScript スキル-jsチュートリアル-php.cn

JavaScript スコープチェーン分析_JavaScript スキル

WBOY

リリース： 2016-05-16 16:31:35

オリジナル

1302 人が閲覧しました

JavaScriptにはScope(スコープ)、Scopechain(スコープチェーン)、ExecuteContext(実行コンテキスト)、ActiveObject(アクティブオブジェクト)、DynamicScope(ダイナミックスコープ)、Closure(クロージャ)といった概念があります。これらの概念を理解するために、静的と動的という 2 つの側面から分析します。

まず、例として簡単な関数を作成します。

コードをコピーしますコードは次のとおりです:

関数 add(num1, num2){

var sum = num1 num2;

合計を返します;

}

2 つの仮パラメータを持つ add 関数を定義します。

静的アスペクト:

追加関数を作成するとき、JavaScript エンジンは追加関数のスコープチェーンを作成します。このスコープチェーンはグローバルコンテキストを指します。図で表すと以下のようになります。

上の図からわかるように、add 関数が作成された時点で、スコープチェーンはすでに作成されているため、関数の作成時に関数のスコープチェーンが作成されていると結論付けることができます。動的ではなく。動的実行時に何が起こるかを見てみましょう。

動的側面:

追加関数が実行されると、JavaScript は追加関数の実行時に必要なすべての情報を含む実行コンテキストを作成します。実行コンテキストには独自のスコープチェーンもあります。関数が実行されると、JavaScript エンジンは最初に追加関数のスコープチェーンから実行コンテキストのスコープチェーンを初期化し、次に JavaScript エンジンはすべてを含むアクティブオブジェクトを作成します。ローカル変数、パラメーター、関数実行時のこの変数とその他の変数。

追加関数の動的実行中に何が起こるかを明確に説明するには、次の図を使用します。

上の図からわかるように、実行コンテキストは関数の実行時に作成され、同時にスコープによって参照されます。実行コンテキストのチェーン。したがって、実行コンテキストとアクティブオブジェクトは両方とも動的概念であり、実行コンテキストのスコープチェーンは関数スコープチェーンによって初期化されるという結論を導き出すことができます。

上記の関数スコープと実行コンテキストスコープについて次に、JavaScript で with ステートメント、try-catch の catch 句、および eval メソッドを使用する場合、JavaScript エンジンは動的スコープの問題について説明します。実行コンテキストのスコープを変更します。例を通して見てみましょう:

コードをコピーしますコードは次のとおりです:

関数 initUI(){ 

(ドキュメント){ //避けてください!
var bd = 本体、

リンク = getElementsByTagName("a"), 

i= 0、

len = リンクの長さ 

while(i 
更新(リンク[i]);
}

getElementById("go-btn").onclick = function(){ 

開始();
}; 

bd.className = "アクティブ" 

}

上記の initUI 関数が実行されると、JavaScript は with ステートメントに対応するスコープを動的に作成し、それを実行コンテキストスコープチェーンのフロントエンドに配置します。上記のプロセスは、次の図の赤でマークされた領域で明確に説明できます。下図のwith文で生成されたスコープが表示されます。

最後に、JavaScript の最も神秘的なクロージャを見てみましょう。JavaScript のクロージャは、実際には関数の実行時に作成されます。

コードをコピーしますコードは次のとおりです: 関数 assignEvents(){

var id = "xdi9592"; Document.getElementById("save-btn").onclick = function(event){

ドキュメントを保存(id); };
}

上記の assignEvents 関数が実行されると、クロージャが作成され、このクロージャは、assignEvents スコープ内の id 変数を参照します。id は、id が消滅したときにスタックに保存されます。関数が実行された後、再度参照するにはどうすればよいでしょうか?明らかに、JavaScript はここで別のアプローチを採用しています。 JavaScript がクロージャを実装する方法を見てみましょう。 assignEvents 関数が実行されると、JavaScript エンジンは assignEvents 関数実行コンテキストのスコープチェーンを作成します。このスコープチェーンには、assignEvents の実行時にアクティブなオブジェクトが含まれます。また、同時にクロージャも作成されます。クロージャのスコープチェーンは、assignEvent が実行されるときにアクティブオブジェクトも参照します。そのため、assignEvents が実行されると、独自の実行コンテキストのスコープチェーンはアクティブオブジェクトを参照しなくなりますが、クロージャは引き続きアクティブオブジェクトを参照します。 assignEvents ランタイムに対応します。これは、JavaScipt 内のクロージャメカニズムを説明します。次の図は、上記の assignEvents 関数の実行時の状況を明確に説明するために使用できます。

上記からわかるように、assignEvents 関数が実行された後、document.getElementById("save-btn").onclick がクロージャを参照するため、ユーザーが save-btn をクリックするとクロージャが実行されます。がトリガーされた場合、クロージャが実行されたときの状況を見てみましょう。前述したように、JavaScript のクロージャは実際には関数であるため、クロージャが実行されるときの状況は、関数が実行されるときと同じです。次の図は、上記の onclick イベントに関連付けられたクロージャを明確に示しています。

上の図からわかるように、JavaScript エンジンは最初にクロージャの実行コンテキストを作成し、次にクロージャスコープチェーンを使用してクロージャの実行コンテキストスコープチェーンを初期化し、最後にクロージャの実行コンテキストスコープチェーンを初期化するときに、対応するアクティブオブジェクトを配置します。クロージャが実行されると、スコープのフロントエンドに入ることで、クロージャが関数であるというアサーションがさらに検証されます。