ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript変数の本格解析_基礎知識

JavaScript変数の本格解析_基礎知識

WBOY
WBOYオリジナル
2016-05-16 15:45:081170ブラウズ

変数スコープは、変数が定義されているプログラム内の領域です。
まず例を見てみましょう:

/* コード 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 的作用域只限于匿名函数内部,
  // 所以这里不能调用

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