ホームページ > 記事 > ウェブフロントエンド > JavaScript変数の本格解析_基礎知識
変数スコープは、変数が定義されているプログラム内の領域です。
まず例を見てみましょう:
/* コード 1 */
var scope = "global "; function checkScope() { var scope = "local "; function childCheck() { var scope = "childLocal "; document.write(scope); } function childUndefined() { document.write(scope); var scope; } function childOverride() { scope = "childOverride "; document.write(scope); } document.write(scope); //输出"local" childCheck(); //输出"childLocal" childUndefined(); //输出"undefined" childOverride(); //输出"childOverride" document.write(scope); //输出"childOverride" } checkScope(); //输出"local childLocal undefinedchildOverride childOverride" document.write(scope); //输出"global "
グローバル スコープとローカル スコープ
グローバル変数にはグローバル スコープがあり、JavaScript のあらゆる場所で定義されます。関数内で宣言された変数はローカル変数であり、そのスコープは関数本体内でのみ定義されます。次の出力は読者にとって驚くことではありません。
/* コード 2 */
var scope = "global"; function checkScope() { var scope = "local"; document.write(scope); } checkScope(); //输出"local" document.write(scope); //输出"global"
var ステートメントを使用せずにグローバル変数スコープ内の変数を使用できますが、ローカル変数を宣言する場合は var ステートメントを使用する必要があります。そうしないと、グローバル変数への参照とみなされます。以下のコードを見てください:
/* コード 3 */
var scope = "global"; function checkScope() { scope = "local"; document.write(scope); } checkScope(); //输出"local" document.write(scope); //输出"local"
ブロック範囲なし
JavaScript にはブロックレベルのスコープがなく、関数内で宣言された変数は関数全体で定義されます。次のコードは、馴染みのない読者にとっては驚くかもしれません:
/* コード 4 */
var scope = "global"; function checkScope() { document.write(scope); //语句4.1 var scope = "local"; //语句4.2 document.write(scope); } checkScope(); //输出"undefinedlocal"
ステートメント 4.1 (varscope = "local";) で宣言された変数は checkScope 関数のスコープ全体で有効であるため、ステートメント 4.2 (document.write(scope);) が実行されると、スコープはローカル変数を参照します。このとき、ローカル変数のスコープが定義されていないため、「未定義」が出力されます。したがって、プログラミングの適切な実践は、関数の先頭ですべての変数宣言をグループ化することです。
上記の内容を理解した上で、コード 1 を見て読者が混乱することはありません。
オブジェクトの属性変数
オブジェクトの属性変数は、次のコードを見た読者が混乱する必要はありません。
/* コード 5 */
var scope = "global "; var obj = new Object(); obj.scope = "object "; obj.checkScope = function () { var scope = "loacl "; document.write(scope); //输出"loacl" document.write(this.scope); //输出"object" document.write(window.scope); //输出"global" } obj.checkScope(); //输出"loacl object global"
いわゆるスコープは、コード ブロック内のこの変数の有効範囲を指します。 JavaScript のスコープを理解していないと、コードのデバッグが困難になる可能性があります。
関数内で var を使用して変数を宣言すると、変数のスコープは関数内に制限され、関数外のコードは変数にアクセスできなくなります。この関数内で関数を宣言すると、内部関数もこの変数にアクセスできます。
逆に、変数の宣言時に var を使用しない場合、この変数のスコープはこの関数に限定されません。 JavaScript エンジンは、変数がグローバル スコープで定義されているかどうかを確認します。変数が定義されていない場合は、グローバル変数として定義されます。
関数は同じスコープ内の変数にアクセスできます:
var foo = 'hello'; var sayHello = function() { console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // also logs 'hello'
変数のスコープ外のコードは変数にアクセスできません:
var sayHello = function() { var foo = 'hello'; console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // doesn't log anything
スコープ内で同じ名前で異なる値を持つ変数を使用しないでください:
var foo = 'world'; var sayHello = function() { var foo = 'hello'; console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // logs 'world'
関数が定義されると、関数内の変数値の変化を確認できます:
var myFunction = function() { var foo = 'hello'; var myFn = function() { console.log(foo); }; foo = 'world'; return myFn; }; var f = myFunction(); f(); // logs 'world' -- haha
スコープもクロージャを通過します
// 一个自执行的匿名函数 (function() { var baz = 1; var bim = function() { alert(baz); }; bar = function() { alert(baz); }; })(); console.log(baz); // 在函数外面不能访问 baz bar(); // 声明 bar 的时候并没有用 var // 所以 bar 是一个全局变量; 但是, // bar 和 baz 在相同的作用域内被定义, // 所以 bar 可以访问 baz // 其实 bar 是个闭包函数 bim(); // bim 的作用域只限于匿名函数内部, // 所以这里不能调用
総合
いわゆるスコープは、コード ブロック内のこの変数の有効範囲を指します。 JavaScript のスコープを理解していないと、コードのデバッグが困難になる可能性があります。
関数内で var を使用して変数を宣言すると、変数のスコープは関数内に制限され、関数外のコードは変数にアクセスできなくなります。この関数内で関数を宣言すると、内部関数もこの変数にアクセスできます。
逆に、変数の宣言時に var を使用しない場合、この変数のスコープはこの関数に限定されません。 JavaScript エンジンは、変数がグローバル スコープで定義されているかどうかを確認します。変数が定義されていない場合は、グローバル変数として定義されます。
関数は同じスコープ内の変数にアクセスできます:
var foo = 'hello'; var sayHello = function() { console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // also logs 'hello'
変数のスコープ外のコードは変数にアクセスできません:
var sayHello = function() { var foo = 'hello'; console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // doesn't log anything
スコープ内で同じ名前で異なる値を持つ変数を使用しないでください:
var foo = 'world'; var sayHello = function() { var foo = 'hello'; console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // logs 'world'
関数が定義されると、関数内の変数値の変化を確認できます。
var myFunction = function() { var foo = 'hello'; var myFn = function() { console.log(foo); }; foo = 'world'; return myFn; }; var f = myFunction(); f(); // logs 'world' -- haha
スコープもクロージャを通過します
// 一个自执行的匿名函数 (function() { var baz = 1; var bim = function() { alert(baz); }; bar = function() { alert(baz); }; })(); console.log(baz); // 在函数外面不能访问 baz bar(); // 声明 bar 的时候并没有用 var // 所以 bar 是一个全局变量; 但是, // bar 和 baz 在相同的作用域内被定义, // 所以 bar 可以访问 baz // 其实 bar 是个闭包函数 bim(); // bim 的作用域只限于匿名函数内部, // 所以这里不能调用