今John Resigの「Pro JavaScript Techniques」を読んでいるが、Closuresについてちょっとメモ。
Closuresとは、内部関数が外部関数の変数を参照するというもので、以下にサンプルを書いてみる。
- window.onload = function () {
- var obj = document.getElementById("main");
- obj.style.border = "1px dashed red";
- delayedHide(obj, 2000);
- }
-
- function delayedHide(obj, time) {
- setTimeout(function() {
- obj.style.display = "none";
- }, time);
- }
window.onload = function () {
var obj = document.getElementById("main");
obj.style.border = "1px dashed red";
delayedHide(obj, 2000);
}
function delayedHide(obj, time) {
setTimeout(function() {
obj.style.display = "none";
}, time);
}
「idが"main"という要素を赤の点線で囲み、2秒後に消す」という簡単なサンプルだ。これをClosuresを使わないで書くと、window.onload内でsetTimeoutを書くことになり、以下のようなコードになる。
- var obj;
- window.onload = function() {
- obj = document.getElementById("main");
- obj.style.border = "1px, dashed red";
- setTimeout("delayedHide()", 2000);
- }
-
- function delayedHide() {
- obj.style.display = "none";
- }
var obj;
window.onload = function() {
obj = document.getElementById("main");
obj.style.border = "1px, dashed red";
setTimeout("delayedHide()", 2000);
}
function delayedHide() {
obj.style.display = "none";
}
この場合は、objをグローバルに宣言する必要があるため、他のライブラリがobjというグローバル変数を使っていた場合にコードが破綻する。また、objを引数にしてもよいが、そうすると、
- window.onload = function() {
- obj = document.getElementById("main");
- obj.style.border = "1px, dashed red";
- setTimeout("delayedHide(obj)", 2000);
- alert(window.obj == obj);
- }
-
- function delayedHide(obj) {
- obj.style.display = "none";
- }
window.onload = function() {
obj = document.getElementById("main");
obj.style.border = "1px, dashed red";
setTimeout("delayedHide(obj)", 2000);
alert(window.obj == obj); // グローバルかを確認
}
function delayedHide(obj) {
obj.style.display = "none";
}
と書いてしまいがち。意図したとおりに動くので問題ないように見えるが、実はwindow.onloadで使用されているobjは、グローバル変数になってしまっているので、実際の引数としてobjはdelayedHideに渡っていない。
上の例に書いたように、alert(window.obj == obj);をwindow.onload内で書くか、delayedHideの引数名objから別の名前に変えることで確認することができる。
じゃあ、window.onload内でobjをvarを使って宣言し、この関数内のスコープにおさめようとすると、以下のようになる。
- window.onload = function() {
- var obj = document.getElementById("main");
- obj.style.border = "1px, dashed red";
- setTimeout("delayedHide(obj)", 2000);
- alert(window.obj == obj);
- }
-
- function delayedHide(obj) {
- obj.style.display = "none";
- }
window.onload = function() {
var obj = document.getElementById("main"); // local scope
obj.style.border = "1px, dashed red";
setTimeout("delayedHide(obj)", 2000);
alert(window.obj == obj); // グローバルかを確認
}
function delayedHide(obj) {
obj.style.display = "none";
}
これだとobjが意図したとおりにdelayedHideに渡らないので、"main"要素が消えない。いろいろ悪あがきをして、以下のように書いたとしても、ブラウザによっては動作したりしなかったりで、もう蟻地獄だ。
- setTimeout("delayedHide(" + obj + ")", 2000);
- setTimeout("delayedHide('" + obj + "')", 2000);
- setTimeout("delayedHide(" + this.obj + ")", 2000);
setTimeout("delayedHide(" + obj + ")", 2000);
setTimeout("delayedHide('" + obj + "')", 2000);
setTimeout("delayedHide(" + this.obj + ")", 2000);
そもそも、関数を呼び出すのに関数名の文字列と変数を組み合わせて値を作るっていうのは、あり得ない。
ということで、function()がいろんな場所に入るので慣れるまでは少し違和感を感じるかもしれないが、Closuresを使ったコードの記述は、ポータビリティを保証するよい方法なのだ。
以前から「欲しい」と思っていた東プレのRealforce。しかし、テンキーなし・USB・英語配列というモデルがないので購入を見送っていた。しかし、ボーナスが出て何を買おうかとネットを見ていたら、なんとRealforce86Uという自分好みのモデルが出ているのを見つけて、思わず買ってしまった。
とうとうLAMYを買ってしまった。緊縮財政でtipo PLだけと思っていたが、店で実際に触ってみて「物欲」がムラムラと...
キングジムからでた「テキスト入力専用」モバイル端末。
こういったものの場合、「失敗したらプレーヤーが壊れる」などの「怪しさ」がイメージとして浮かぶが、あくまでも追加でファームウエアを書き込むだけ。つまり、書き込み後はデュアルブートの状態になるため、元のファームウエアへは何も影響が無いようだ。
最近「におわなっとう」から、タレとカラシの袋がないという新製品が発売になった。今日はその体験記を。
通勤で乗換えをする駅構内のカフェでは、毎週水曜日にお持ち帰りのシフォンケーキを売っている。値段は500円。
これを見ると、100人中100人が「iPod Touchが76%引き!!」と思うだろうが、実はケースなのだ。悪意は無いんだろうが、本当にまぎらわしい。実は2回もだまされてしまった。
