Javascriptのグローバル変数とローカル変数のまとめメモ。
data = 'global'; function scope(){ data = 'local'; return data; } document.writeln(scope()); document.writeln(data);
実行結果
local local
関数の外にある変数が関数内の処理で上書かれている。
- グローバル変数とローカル変数
var data = 'global'; function scope(){ var data = 'local'; return data; } document.writeln(scope()); document.writeln(data);
実行結果
local global
変数宣言の前に"var"をつけることで、関数内のローカル変数とグローバル変数を区別できる。変数宣言はすべて"var"付きにすることが重要。
- 関数の仮引数
value = 'global'; function scope(value){ value = 'local'; return value; } document.writeln(scope('test')); document.writeln(value);
実行結果
local global
関数の仮引数は、暗黙的に"var"が宣言されている。その為、ローカル変数として扱われる。
- スコープチェーン
var scopeData = 'global'; function scope(){ var scopeData = 'local'; subScope(); function subScope(){ var subData = 'subLocal'; document.writeln(scopeData); document.writeln(subData); document.writeln(data); // 未定義エラー } } scope();
実行結果
local subLocal
"data"はどこにも定義されていないので、未定義エラー。"subData"と"scopeData"は定義されているので、表示できる。
- 即時関数パターン
(function(){ var data = 'sample'; document.writeln(data); })(this); document.writeln(data); // エラーとなる
実行結果
sample
jQuery等のライブラリでグローバルオブジェクトを汚染しないように使用しているパターン。jQueryではこのような使われ方をしている。
(function( window, undefined ) { // 処理 })( window );
これだとjQuery内の処理はグローバルオブジェクトを汚さずにすべてローカルオブジェクトとして扱う。Javascriptのよくないグローバル変数を隠蔽できる。まとまった処理でグローバルオブジェクトを汚したくない場合に使うといい。