Mach3.laBlog

どう書いていますか?JavaScriptのクラス

この記事は賞味期限切れです。(更新から1年が経過しています)

JavaScriptでのクラスの話は定期的に書いているネタな気がしますが、
自分でもなかなかスタイルが定まらないので、ちょっとメモなど。

どう書いていますか?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”イベントに着火される仕組み。

あまり頻繁に使う事もない気がしますが。


と、こんな感じで書いておりますが、
他の方がどのように書いているのかも知りたいところですね!

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Tweets that mention どう書いていますか?JavaScriptのクラス | Mach3.laBlog -- Topsy.comd41d8cd98f00b204e9800998ecf8427e