ちょっと詳しくJavaScript 第4回【スコープとクロージャ】

ちょっと詳しくJavaScript 第4回【スコープとクロージャ】
2011年07月22日

株式会社ランチェスター
TEL: 03-5775-3395 Fax:03-5775-3396
URL: http://www.lanches.co.jp/

JavaScriptの変数とデータ型
数値型（number）参照型（参照渡し）
文字列型（string）
基本型
真偽型（boolean） var a = {val:1};
特殊（null、undefined） var b = a;
オブジェクト（object） b.val = 5;
参照型関数（function） alert(a.val); // 5
配列（object）

基本型（値渡し） var a = [1, 2, 3];
var b = a;
var a = 5; b[0] = 5;
var b = a; alert(a[0]); // 5
b = 10;
alert(a); // 5 ※ 関数の参照渡しは実例を見せる
のが難しいのでパス (´・ω・｀)

Proprietary and Confidential to Lanchester Co.,LTD. Page 1

JavaScriptの変数スコープ
• グローバルスコープ
• プログラム中のどこからでも参照可能

• ローカルスコープ
• その変数が宣言された関数の中でのみ参照可能

この2つしかないです。


JavaScriptの変数スコープ－実例１
var n = 1; // グローバル

function f() { // ←実はこれもグローバル
var n = 0; // ローカル
return n;
}

alert(n); // 1
alert(f()); // 0
alert(n); // 1


JavaScriptの変数スコープ－実例２
n = 1; // グローバル

function f() { // ←実はこれもグローバル
n = 0; // グローバル
return n;
}

alert(n); // 1
alert(f()); // 0
alert(n); // 0

関数内で「var」を付けた変数がローカルスコープとなる。
グローバル変数の宣言は「var」を付けても付けなくても変わらない。


ローカルスコープは関数全体で有効
function f() {
for(var i=0; i<10; i++) {
// 特に何もしないよ
}
alert(i); // ※
}

f();

※で「10」が表示される。

JavaScriptに「ブロックスコープ」は存在しない。


関数名も変数なので
function f() {
g(); // FunctionDeclarationにより
function g() { // 先に実行式があっても問題ない
alert("localFunc");
}
}

f(); // localFunc と表示
g(); // スコープ外なので実行不可

今までの考え方をそのまま活用でき、その通りの結果となる。


実は違った関数リテラルとFunction型
var n = 1;

function f() {
var n = 0;
var s1 = new Function("", "alert(n);");
var s2 = function() { alert(n); };
s1(); // 1→グローバルを参照
s2(); // 0→ローカルを参照
}
f();

ECMAScriptの仕様により、Functionコンストラクタで作られる関数はグ
ローバルオブジェクトのスコープを参照して実行される。


実は違った関数リテラルとFunction型－２
// var n = 1;

function f() {
var n = 0;
var s = new Function("", "alert(n);"); // エラー
}
f();

グローバル変数nがないためそもそも定義しようとした時点でエラーとな
ってしまう。


仮引数もローカルスコープ
var n = 1;

function f(n) {
n++;
return n;
}

alert(f(10)); // 11
alert(n); // 1

同じ変数名だけど値渡しなのでグローバルのnはそのまんま。


仮引数もローカルスコープだけど・・・参照型
var a = [1, 2, 3];

function f(v) {
v[0] = 10;
return v;
}

alert(f(a)); // 10, 2, 3
alert(a); // 10, 2, 3

違う変数名だけど参照渡しなので実体が変更される。


スコープチェイン
var a = 1;

function f() {
var b = 2;
function g() {
var c = 3;
return a + b + c;
}
return g();
}

alert(f()); // 6

自分自身のスコープにない変数の場合スコープを順に辿っていき、変
数を探し出す。

ところでthisって
<input type="button" value="test" id="btn">

<script type="text/javascript">
function where() {
alert(this);
}

var o = { method: where };
document.getElementById("btn").onclick = where;

where(); // [object Window]
o.method(); // [object Object]
// [test]ボタンクリック // [object HTMLInputElement]
</script>

「誰の関数として実行されたか」
がthisに入ってくる。
特にイベントハンドラの場合には注意。

本命：クロージャ（Closure、閉包）
• 引数以外の変数を実行時の環境ではなく、自身が定義された環境（
静的スコープ）において解決することを特徴とする
• Wikipediaより

• ローカル変数を参照している関数内関数
• ＠ITより

• 関数自身が定義された環境を、ローカル変数も含めて持ち運ぶことの
できる仕組み（またはそうした関数自体）
• ZDNet builderより

・・・何言ってんだか分かんねっす(´・ω・｀)


シンプルなクロージャ
function closure(init) {
var c = init;
var f = function() {
c++;
return c;
};
return f;
}

var counter = closure(5);

alert(counter()); // 6

return fにより返された関数（counter）は、それが生成されたタイミング
でローカルスコープだったcを閉じ込めて（Closure/閉包）いる。


１つのクロージャを複数で使ってみる
function closure(init) {
var c = init;
return function(){ return ++c; }
}

var c1 = closure(5);
var c2 = closure(10);

alert(c1()); // 6
alert(c1()); // 7
alert(c2()); // 11
alert(c2()); // 12
alert(c1()); // 8
alert(c2()); // 13

それぞれがclosureを実行したタイミングでクロージャが作られている。


総決算
<input type="button" id="btn" value="設定">

<script type="text/javascript">
document.getElementById("btn").onclick = buttonState(true);

function buttonState(flag) {
return function() {
flag = !flag;
this.value = flag ? "設定" : "解除";
};
}
</script>


株式会社ランチェスター
TEL: 03-5775-3395 Fax:03-5775-3396
URL: http://www.lanches.co.jp/

ちょっと詳しくJavaScript 第4回【スコープとクロージャ】

More Related Content

What's hot

Viewers also liked

Similar to ちょっと詳しくJavaScript 第4回【スコープとクロージャ】

More from 株式会社ランチェスター

ちょっと詳しくJavaScript 第4回【スコープとクロージャ】