Javascript のクロージャとかプロトタイプとか
会社で Javascript のクロージャとかプロトタイプについて話したので忘れないようにメモ。jsdo.it を試してみたらデバッグしにくかった..。
クロージャで countup!
num の初期化(=0)部分が1回しか呼ばれない。
console.log("aaa");
function countup(){
var num = 0;
console.log("bbb");
return function(){
num++;
console.log("num=" + num);
window.document.write("<br />" + num);
}
}
var c = countup();
c();//1
c();//2
c();//3
c();//4
c();//5
[/javascript]
num のスコープが関数内に収まる。また、参照が全て同じ num なので countup が成立する。
プロトタイプで継承とか
チープですが...。※重要※ の部分が重要。Human というベースとなる関数オブジェクトを Warrier という関数オブジェクトで継承する。人という無職がウォーリアーという職業についた感じ。
// Human 関数オブジェクト
var Human = function(name) {
this.name = name;
};
Human.prototype = {
punch: function() {
alert("パンチ!");
},
escape: function() {
alert("逃げる!");
},
say: function() {
alert("僕の名前は" + this.name + "だ!");
}
};
var human = new Human("かみぴー");
human.punch();
human.say();
// Warrier 関数オブジェクト
var Warrier = function(){};
// ※重要※ Warrier のプロトタイプに Human クラスのオブジェクトを入れる
Warrier.prototype = new Human("かみぴー戦士");
// sword 関数を追加
Warrier.prototype.sword = function(){
alert("剣で切る!");
}
var warrier = new Warrier();
Warrier.prototype.punch();
Warrier.prototype.say();
Warrier.prototype.sword();
[/javascript]
プロトタイプはクラスのような記述が出来るので継承とかが簡単に出来る。パフォーマンスもいいらしい。
参考
「猿でもわかる」のクロージャの説明はすごく分かりやすい。
- [JavaScript] 猿でもわかるクロージャ超入門 まとめ
- javascriptのオブジェクト指向とかプロトタイプとか
- JavaScriptでクラス定義する時、クロージャを使う場合とprototypeを使う場合の違い
クロージャでもクラスのような記述が出来るようなので、その辺は今度調べる。Good Pars本に色々と書いてある。