Javascript のクロージャとかプロトタイプとか

会社で Javascriptクロージャとかプロトタイプについて話したので忘れないようにメモ。jsdo.it を試してみたらデバッグしにくかった..。

クロージャで countup!

num の初期化(=0)部分が1回しか呼ばれない。

[javascript]

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]

2012-02-20 クロージャで countup!

num のスコープが関数内に収まる。また、参照が全て同じ num なので countup が成立する。

プロトタイプで継承とか

チープですが...。※重要※ の部分が重要。Human というベースとなる関数オブジェクトを Warrier という関数オブジェクトで継承する。人という無職がウォーリアーという職業についた感じ。

[javascript]

// 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]

プロトタイプはクラスのような記述が出来るので継承とかが簡単に出来る。パフォーマンスもいいらしい。

2012-02-20 プロトタイプで継承とか

参考

「猿でもわかる」のクロージャの説明はすごく分かりやすい。

クロージャでもクラスのような記述が出来るようなので、その辺は今度調べる。Good Pars本に色々と書いてある。