JavaScript 変数のスコープ分類と使用テクニックを例とともに詳しく説明

変数スコープはすべてのプログラミング言語に関係するトピックであり、変数スコープを深く理解することは、安定したプログラムを作成するのに役立ちます。

1. JavaScript のスコープ分類
JavaScript には、グローバル (ウィンドウ) と関数レベル (関数) の 2 つのスコープがあります。関数レベル（関数）を「ブロックレベル（中括弧{}レベル）」として理解してはなりません。

2. JavaScript のグローバル変数とローカル変数を区別して定義する
1.1 var キーワードの有無にかかわらず、すべての関数の最外周で定義された変数はグローバル変数です。グローバル変数は実際には window オブジェクトの属性に解析されるため、「window.global 変数名」メソッドでアクセスできます。必要な場合を除き、変数名を使用して直接アクセスすることをお勧めします。次の例は、グローバル変数を定義する最も一般的な方法を示しています:

var msg1='This is message 1'; 
msg2='This is message 2'; 
alert(window.msg1); //This is message 1 使用window关键字进行访问 
alert(window.msg2); //This is message 2 
alert(msg1); //This is message 1 省略window关键字的访问方式 
alert(msg2); //This is message 2 
function otherFunction(){} //其它一些函数或对象声明代码 
var otherObject={};

1.2 グローバル変数は、関数 (ローカル変数ランタイム環境) 内で定義および取得することもできます。定義方法はvarキーワードを使用せず、グローバル変数の内容をローカル環境で簡単に取得でき、グローバル変数名で参照するだけです。グローバル変数と同じ名前のローカル変数が関数内で定義されている場合、この時点で同じ名前のグローバル変数を使用する必要がある場合、関数本体は最初に独自のローカル変数を使用することに注意してください。ウィンドウ接頭辞を追加してください。例:

var msg1='This is message 1'; 
var msg3='This is message 3'; 
function otherFunction() 
{ 
msg2='This is message 2'; //不使用var关键字，其实也是定义一个全局变量 
var msg3='Message 3'; 
alert(msg1); //This is message 1 （函数内当然可以访问到外面定义的全局变量，再深的函数嵌套一样能正确获到这个全局变量，这是JavaScript闭包的其中一种体现） 
alert(msg3); //Message 3 （局部变量msg3） 
alert(window.msg3); //This is message 3 （使用window前缀访问同名的全局变量msg3） 
alert(this.msg3); //This is message 3 （因为otherFunction ()定义在一个全局的环境中，此时otherFunction ()的this也是指向window，所有你看到window. msg3是等于this. msg3的） 
} 
otherFunction(); 
//otherFunction函数外面定义的msg1和里面定义的msg2依然是全局变量 
alert(window.msg1); //This is message 1 
alert(window.msg2); //This is message 2

2.1 var キーワードを使用すると、関数本体で定義された変数はローカル変数になります。この変数は、その下のすべてのステートメント ブロック ({}) とサブ関数で使用できます。この変数には、この関数内のどこからでもアクセスできますが、この関数の外で「直接」アクセスすることはできません (クロージャにより間接アクセスまたはプロキシ アクセスが許可されます。このナレッジ ポイントはこの記事の範囲外です)。例は次のとおりです。

function showMsg() 
{ 
if (true) 
{ 
var msg='This is message'; 
} 
alert(msg); //This is message 
} 
showMsg(); 
alert(typeof(msg)); //undefiend 
//这里在if {}大括号内定义的变量msg还能在if外showMsg()内访问到，但在showMsg()外则是无法访问的

2.2 親関数の変数には子関数からアクセスできますが、子関数の変数には親関数からアクセスできません。これは明らかに関数レベルのスコープと一致しています。冒頭でも触れました。父親の方が明るく、息子はケチなようです。例は次のとおりです:

function showMsg() 
{ 
var MsgA='Message A'; 
this.setMsg=function(msg) 
{ 
var MsgB='Message B'; 
alert(MsgA); //Message A （子函数setMsg()可以访问父函数showMsg()的局部变量MsgA） 
} 
alert(MsgB); //MsgB未定义 （在父函数中不能访问其子函数中定义的变量MsgB） 
} 
var sm=new showMsg(); 
sm.setMsg('Message string');

3. 使用上のヒント
1. 変数が混同されたり上書きされたりするのを避けるために、ローカル変数の定義に忘れずに var キーワードを追加してください (必要に応じて、変数を積極的に解放する必要があります)。使用後 (つまり、「変数名 = null」)、すべての変数を各関数本体の先頭で定義することをお勧めします。例は次のとおりです。

var msg='Message'; 
function showMsg() 
{ 
var msg; //这里即使不小心使用了与全局变量一样的变量名，也不用担心覆盖同名全局变量的问题 
var a; 
var b; 
var c; 
for (a=0;a<10;a++){} 
this.setMsg=function(){} 
}

2. 匿名関数を上手に使用して、名前の競合や変数の汚染を減らします。次の 2 つのコードは実際には同じ関数を実装しています。最初のコードの書き方は、匿名関数内などで使用したい変数名を大胆に使用でき、その必要はありません。自分が定義した変数が他の人の定義や他の場所にある自分の定義を上書きすることを心配しないでください。

//定义一个匿名函数，然后把代码丢到这个匿名函数里面，能有效减少命名冲突或变量污染，这是常见JS框架的做法 
(function() 
{ 
var msg='This is message'; 
alert(msg); 
})(); 
document.write(msg); //msg未定义 （匿名函数外的其它方法已无法调用msg这个变量） 
//----------------------------- 
var msg='This is message'; 
alert(msg);

3. インスタンス化を必要としない関数内のグローバル変数にアクセスするために、ウィンドウの代わりにこれを使用することはお勧めできません。通常、this キーワードを使用する関数は JavaScript クラスとして扱われます (私はクラス名の先頭に「cls」を付けるのが好きです)。以下の関数を通常の関数として呼び出すだけの場合、通常はグローバル変数を操作するため、 this キーワードは出現しないはずです。例:

りー

以上がJavaScript 変数のスコープ分類と使用テクニックを例とともに詳しく説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。