.prototypeを使ったオブジェクト定義 (2009/02/05)

posted takuji_mezawa

JavaScriptでのOOで実装する場合に他のJavaScriptライブラリと併用するようなアーキテクチャを考慮するときには、埋め込みされている .prototype プロパティの使用には注意が必要だという記事を最近読んだことがある。どこだったかなあ・・・。

かすかな記憶（※あとでちゃんと調べておこう・・・。）だと、オブジェクトのコンフリクトによる動作不安定を誘発する可能性があるというものだったと思われる。

例えば、入力検証を実施できるValidate.jsでは、以下のようなオブジェクト定義部分がある。

var Class = {
    create:function() {
        return function() {
            this.initialize.apply(this, arguments);
        }
    }
}

var Validate = Class.create();
Validate.prototype = {
// 何らかの実装
}

これを使用するオリジナルのJavaScriptオブジェクトをオブジェクト指向的に定義するときには、prototypeプロパティの使用を控えなければならない。ではどんな風に実装するのか。

var SomeObj = function() {
    function xxx() {
        // プライベートなメソッド、もしくはハンドラー／関数
    }

    this.someProperty = function(xxx, xxx) {
        // パブリックなメソッド
    };

    /* これがキモ */
    return this;
}
hoge = new SomeObj();  // インスタンス
hoge.something = SomeObj.someProperty;  // メソッドのエイリアスみたいなものかな・・・

こんな感じ。後は、hogeで利用可能。SomeObjを使ってもOK。

メンバーのodaka氏との間では、JavaScriptを外部化するときには、上記の実装方法とし、インライン化するときには、以下のような実装方法にするよう、合意をしている。

　　　：
<script id="xxxInitScript" type="text/javascript">
// <![CDATA[
window.onload = function () {
 // 何らかの処理のイベント登録
}
// ]]>
</script>
　　　：
<script id="xxxMainScript" type="text/javascript">
// <![CDATA[
HogeApp = function() {
   :
 /* これ以降はパブリックなオブジェクト */
 return {
   init:function() {
     // 初期処理
   },
   something:function(xxx) {
     // 何らかのメソッド
   }, ...
 };
}();
// ]]>
</script>
　　　：

使用するときには HogeApp.xxxxx() などとなるはずだ。

本質的にはいずれの実装方法も同様の意味をなす。とにかくprototypeプロパティの使用に注意が必要。