【メモ】JavaScriptのメンバ変数までprototypeを付けてしまった場合のNGとOKケース

JavaScriptでクラスをnewして作ったインスタンスＡと、もう１つnewで作ったインスタンスＢがある時、ＡとＢの各メンバ変数を変更した後で両方を出力してみたらＡとＢが同じになっていて驚いた！

よくよくソースを見てみたらメンバ変数にまでprototypeを付けてしまっていたからこうなっただけだったorz
……というだけの話。

実際のコードと、デモ

デモはjsfiddleで確認できます。

NGケース

デモ：https://jsfiddle.net/pinoxox/6bryu4ka/

    var MyClass = function() {};
    MyClass.prototype.vars = {
        memba : ''
    };
    MyClass.prototype.init = function(opt) {
        $.extend(this.vars, opt); // jQuery利用想定
    };
    MyClass.prototype.print = function() {
        $('body').append( '<p>'+ this.vars.memba +'</p>' );
    };
    var cA = new MyClass();
    cA.init({ memba : 'hoge' });
    cA.print(); // -> hoge
    var cB = new MyClass();
    cB.init({ memba : 'fuga' });
    cB.print(); // -> fuga
    cA.print(); // -> hoge ではなく fuga

OKケース

デモ：https://jsfiddle.net/pinoxox/7xw9L1k6/

    var MyClass = function() {
        this.vars = {
            memba : ''
        };
    };
    MyClass.prototype.init = function(opt) {
        $.extend(this.vars, opt); // jQuery利用想定
    };
    MyClass.prototype.print = function() {
        $('body').append( '<p>'+ this.vars.memba +'</p>' );
    };
    var cA = new MyClass();
    cA.init({ memba : 'hoge' });
    cA.print(); // -> hoge
    var cB = new MyClass();
    cB.init({ memba : 'fuga' });
    cB.print(); // -> fuga
    cA.print(); // -> hoge は保たれる