オブジェクト指向 JavaScript で陥りやすく見つけにくいミス。

まあ意味の無いクラスですけど以下のようなコレクションクラスを作ります。

var Container = function() {};

Container.prototype = {
    length: 0,
    buffer: [],
    add: function(obj) {
        this.length++;
        this.buffer.push(obj);
    },
    toString: function() {
        var stringBuffer = ['Length is ', this.length, '. Contents are [', this.buffer, '].'];
        return stringBuffer.join('');
    }
};

以下のように使います。

var firstContainer = new Container();
var secondContainer = new Container();

firstContainer.add('お');
firstContainer.add('ぶ');
firstContainer.add('じ');
firstContainer.add('ぇ');
firstContainer.add('く');
firstContainer.add('と');

alert(firstContainer);
alert(secondContainer);

secondContainer を alert すると、length は正しい値になるのに、実際の配列の中身は不正になっています。
実は、 JavaScript にはプロトタイプチェーンという概念があって、それがこうなる原因なんです。

this.length はプロトタイプとインスタンスの両方に存在し、 this.buffer はプロトタイプにだけ存在する。
この辺を教えるのが難しいんだよなー。自分でもよくミスるし。

例を実行 → http://Sample.ECMAScript.jp/20060323.html