どう書いていますか?JavaScriptのクラス
この記事は賞味期限切れです。(更新から1年が経過しています)
JavaScriptでのクラスの話は定期的に書いているネタな気がしますが、
自分でもなかなかスタイルが定まらないので、ちょっとメモなど。
基本的な形
プラグインとか書いた事もありましたが、
結局今は、こんなオーソドックスな形に収まっています。
var Person = function( name ){
/* コンストラクタ */
this.name = name;
};
Person.prototype = {
name : null,
sayHello : function(){
console.log( "こんにちは!" + this.name + "です!" );
}
};
var john = new Person( "まっは" );
john.sayHello(); // "こんにちは!まっはです!"
プロパティにオブジェクトを使う
オブジェクトに設定値をまとめてコンストラクタに引数で渡して~っていうのは結構頻出ですが、
プロパティにオブジェクトを使いつつ、インスタンスを複数作りたい場合は注意が必要。
普通に書いてしまうと、どのインスタンスもprototypeのメンバを参照してしまい、
或るインスタンスで値を変えると、他のインスタンスでも変わってしまうという困った事になります。
こちらの記事がわかりやすかったです。
そこで、上の記事を参考にこんな感じ書いておきます。
var Person = function( option ){
this.option = $.extend( {}, this.option ); // 重要!
this.setOption( option );
};
コンストラクタ一行目、optionを空のオブジェクトに格納しなおして代入しています。
こうすることで、インスタンス毎に別のオブジェクトを扱えるという寸法。なるほどなるほど。
Person.prototype = {
option : {
name : null,
age : null
},
setOption : function( option ){
$.extend( this.option, option );
},
sayHello : function(){
console.log(
"こんにちは!" + this.option.name + "です!" +
"永遠の" + this.option.age + "歳です!"
);
}
};
var john = new Person( { name : "ジョン", age : 29 } ),
tom = new Person( { name : "トム", age : 16 } );
john.sayHello(); // "こんにちは!ジョンです!永遠の29歳です!"
tom.sayHello(); // "こんにちは!トムです!永遠の16歳です!"
コンストラクタの一行目の処理がない場合、
上の出力結果はどちらもトム16歳になってしまいます。
カスタムイベントを使う
AS3のdispatchEventみたくカスタムイベントを利用してみます。
同じ内容を確か以前書きましたが、まとめの為、一応。
var Items = function( data ){
this.data = $.extend( [], this.data, data );
};
Items.prototype = {
EVENT_ADDED : "added",
data : [],
add : function( value ){
this.data.push( value );
$(this).trigger( this.EVENT_ADDED );
},
bind : function( type, handler ){
$(this).bind( type, handler );
}
};
といっても、自身を格納したjQueryオブジェクトからbind/triggerを呼び出してるだけですが…。
var MyItems = new Items;
MyItems.bind( MyItems.EVENT_ADDED, function(){
console.log( this.data );
});
MyItems.add( "foobar" ); // ["foobar"]
イベントリスナの登録はbindを使います。
addメソッドで値を追加すると、”added”イベントに着火される仕組み。
あまり頻繁に使う事もない気がしますが。
と、こんな感じで書いておりますが、
他の方がどのように書いているのかも知りたいところですね!
コメント