JavaScript スコープとスコープchain_javascript スキルの詳細な分析-jsチュートリアル-php.cn

スコープは JavaScript の最も重要な概念の 1 つです。JavaScript をよく学びたい場合は、JavaScript のスコープとスコープチェーンの動作原理を理解する必要があります。今日の記事では、JavaScript のスコープとスコープチェーンについて簡単に紹介し、誰もが JavaScript をより良く学習できるようにしたいと考えています。

JavaScript スコープ

どのプログラミング言語にもスコープの概念があります。簡単に言えば、スコープは変数と関数のアクセス可能な範囲です。つまり、スコープは変数と関数の可視性とライフサイクルを制御します。 JavaScript には、グローバルスコープとローカルスコープの 2 種類の変数スコープがあります。

1. グローバルスコープ

コード内のどこからでもアクセスできるオブジェクトにはグローバルスコープがあります。一般に、グローバルスコープを持つ状況がいくつかあります。

(1) 最も外側の関数とその外側で定義された変数はグローバルスコープを持ちます。例:

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

var authorName="Mountainside Brook"; 
function doSomething(){ 
var blogName=""; 
function innerSay(){ 
 alert(blogName); 
innerSay(); 
alert(authorName) //Mountainside Stream
alert(blogName); ; // 
innerSay() //スクリプト エラー 


(2) 定義されておらず、値が直接割り当てられていないすべての変数は、次のように自動的にグローバル スコープを持つように宣言されます。 

コードをコピーします

コードは次のとおりです:function doSomething(){ var authorName=" Shanbian Xiao Stream"; blogName="";

alert(authorName);

} 
alert(blogName); // 
alert(authorName); // スクリプト エラー 
 
変数 blogName にはグローバル スコープがありますが、関数の外部から authorName にアクセスすることはできません。 

(3) すべてのウィンドウ オブジェクト プロパティにはグローバル スコープがあります

通常、ウィンドウオブジェクトの組み込みプロパティには、window.name、window.location、window.top などのグローバルスコープがあります。

2. ローカルスコープ

グローバルスコープとは対照的に、ローカルスコープは通常、固定されたコードフラグメント内でのみアクセスできます。最も一般的なものは関数内にあるため、場所によっては、このスコープを関数スコープと呼んでいる場合があります。次のコードの、blogName および関数 innerSay はローカルスコープのみを持ちます。

コードをコピー

コードは次のとおりです。function doSomething(){ var blogName=" "; 関数 innerSay(){

alert(ブログ名)

} 
alert(ブログ名); >innerSay( ); //スクリプト エラー 

スコープ チェーン

JavaScript では、関数もオブジェクトです。実際、JavaScript 内のすべてのものはオブジェクトです。関数オブジェクトには、他のオブジェクトと同様に、コードを通じてアクセスできるプロパティと、JavaScript エンジンのみがアクセスできる一連の内部プロパティがあります。内部プロパティの 1 つは [[Scope]] で、ECMA-262 標準第 3 版で定義されています。この内部プロパティには、関数が作成されるスコープ内のオブジェクトのコレクションが含まれます。このコレクションは関数のスコープ チェーンと呼ばれます。 、関数がどのデータにアクセスできるかを決定します。 

関数が作成されると、そのスコープ チェーンには、関数が作成されたスコープ内でアクセス可能なデータ オブジェクトが設定されます。たとえば、次の関数を定義します:

コードをコピーします

コードは次のとおりです:

function add(num1, num2) { var sum = num1 num2 } 関数 add が作成されると、グローバルオブジェクトが入力されます。次の図に示すように、グローバルオブジェクトにはすべてのグローバル変数が含まれています (注: この図はすべての変数の一部のみを示しています):

関数 add のスコープは実行時に使用されます。たとえば、次のコードを実行します。 

コード

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

var total = add(5, 10);
この関数が実行されると、「実行コンテキスト」と呼ばれる内部オブジェクトが作成され、関数が実行されるときの環境を定義します。各ランタイムコンテキストには、識別子解決のための独自のスコープチェーンがあり、ランタイムコンテキストが作成されると、そのスコープチェーンは、現在実行中の関数の [[Scope]] に含まれるオブジェクトに初期化されます。

値は、関数内に出現する順序でランタイムコンテキストのスコープチェーンにコピーされます。これらは一緒に「アクティベーションオブジェクト」と呼ばれる新しいオブジェクトを形成します。このオブジェクトには、すべてのローカル変数、名前付きパラメータ、パラメータコレクションが含まれており、実行時にこのオブジェクトがスコープチェーンのフロントエンドにプッシュされます。コンテキストが破棄されると、アクティブなオブジェクトも破棄されます。新しいスコープチェーンは次のとおりです:

関数の実行中に変数が見つからない場合、識別子の解析プロセスを経て、データを取得して保存する場所が決定されます。このプロセスはスコープチェーンの先頭、つまりアクティブなオブジェクトから開始され、同じ名前の識別子が見つかった場合は、その識別子に対応する変数を使用します。見つからない場合は、続行します。スコープチェーン内の次のオブジェクトを検索します。 If 検索後にオブジェクトが見つからない場合、識別子は未定義とみなされます。関数実行時には、各識別子に対してこのような検索処理が行われます。

スコープチェーンとコードの最適化

スコープチェーンの構造から、識別子がランタイムコンテキストのスコープチェーンの深いところにあるほど、読み取りと書き込みの速度が遅くなることがわかります。上の図に示すように、グローバル変数は常にランタイムコンテキストスコープチェーンの最後に存在するため、識別子の解決中にグローバル変数を見つけるのが最も遅くなります。したがって、コードを記述するときは、グローバル変数の使用をできるだけ少なくし、ローカル変数をできるだけ使用する必要があります。経験則としては、クロススコープオブジェクトが複数回参照される場合は、使用する前にローカル変数に格納します。たとえば、次のコード:

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

function changeColor (){

document.getElementById("btnChange").onclick=function(){

document.getElementById("targetCanvas").style.backgroundColor="red";

};

}

この関数は、グローバル変数ドキュメントを 2 回参照し、変数を見つけるには、グローバルオブジェクトで最終的に見つかるまでスコープチェーン全体をたどる必要があります。このコードは次のように書き換えることができます:

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

関数changeColor() {

var doc=ドキュメント

doc.getElementById("btnChange").onclick=function(){

doc.getElementById("targetCanvas").style.backgroundColor="red";

};

}

このコードは比較的単純で、書き換えても大きなパフォーマンスの向上は見られませんが、プログラム内に繰り返しアクセスされるグローバル変数が多数ある場合、書き換えられたコードのパフォーマンスは大幅に向上します。

スコープチェーンの変更

対応するランタイムコンテキストは関数が実行されるたびに一意であるため、同じ関数を複数回呼び出すと、関数の実行が完了すると複数のランタイムコンテキストが作成されます。各ランタイムコンテキストはスコープチェーンに関連付けられます。通常、ランタイムコンテキストの実行中、そのスコープチェーンは with ステートメントと catch ステートメントによってのみ影響を受けます。

with ステートメントは、オブジェクトを使用してコードを繰り返し記述することを避けるためのショートカット方法です。例:

コードをコピーコードは次のとおりです。

function initUI(){

with(ドキュメント){

var bd=body,

links=getElementsByTagName("a"),

i=0、

len=リンクの長さ

while(i

更新(リンク[i ]);

}

getElementById("btnInit").onclick=function(){

doSomething()

};

}

ここで width ステートメントは、ドキュメントを複数回記述することを避けるために使用されており、効率的であるように見えますが、実際にはパフォーマンスの問題が発生します。

コードが with ステートメントまで実行されると、ランタイムコンテキストのスコープチェーンが一時的に変更されます。パラメーターで指定されたオブジェクトのすべてのプロパティを含む新しい可変オブジェクトが作成されます。このオブジェクトはスコープチェーンの先頭にプッシュされます。つまり、関数のすべてのローカル変数が 2 番目のスコープチェーンオブジェクト内にあるため、アクセスコストが高くなります。以下に示すように:

したがって、この例では、ドキュメントをローカル変数に保存するだけでパフォーマンスが向上するため、プログラム内で with ステートメントを使用することは避けてください。

スコープチェーンを変更するもう 1 つの点は、try-catch ステートメント内の catch ステートメントです。 try コードブロックでエラーが発生すると、実行プロセスは catch ステートメントにジャンプし、その後、例外オブジェクトが可変オブジェクトにプッシュされ、スコープの先頭に配置されます。 catch ブロック内では、関数のすべてのローカル変数が 2 番目のスコープチェーンオブジェクトに配置されます。サンプルコード:

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

try{

doSomething()

}キャッチ(例){

alert(ex.message); // ここでスコープチェーンが変更されます

}

catch ステートメントが実行されると、スコープチェーンは以前の状態に戻ることに注意してください。 try-catch ステートメントはコードのデバッグや例外処理に非常に役立つため、完全に回避することはお勧めできません。コードを最適化することで、catch ステートメントのパフォーマンスへの影響を軽減できます。良いパターンは、エラー処理を関数に委任することです。例:

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

試してください{

doSomething()

}キャッチ(例){

handleError(ex); //プロセッサメソッドに委任します

}

最適化されたコードでは、catch 句で実行されるコードは handleError メソッドだけです。この関数は例外オブジェクトをパラメータとして受け取るため、エラーをより柔軟かつ均一に処理できます。実行されるステートメントは 1 つだけであり、ローカル変数にはアクセスされないため、スコープチェーンの一時的な変更はコードのパフォーマンスに影響しません。