JS：プロトタイピング - 正しいインスタンスプロパティにアクセス

Question

私はJSのプロトタイプについて少し混乱しています。私はこのためにバイオリンを用意しました：

http://jsfiddle.net/GBCav/7/

マークアップ：

<div class="container1"> 
    <p>Container 1</p> 
    <button>Turn me (container1) red</button> 
</div> 

<div class="container2"> 
    <p>Container 2</p> 
    <button>Turn me (container2) red</button> 
</div> 

JS：

// Constructor Function 
function Box(container) { 
    this.container = $(container); 
} 

// Prototype method 
Box.prototype = { 
    init : function() { 

     // Assign buttons to object variable 
     this.button = this.container.find('button'); 

     $this = this; // Set 'this' to Slider object 
     this.button.on('click', function() { 
     // It is getting the wrong container here, but why 
     $this.container.css('background-color','red'); 
     }); 
    } 
}; 

は、ここで私はコンストラクタ関数を呼び出す方法は次のとおりです。

// Create two instances of box 
(function() { 
    var container1 = new Box($('div.container1')); 
    container1.init(); 

    var container2 = new Box($('div.container2')); 
    container2.init(); 
})(); 

私は2つありますコンストラクタ関数によって作成されたボックスオブジェクト。ボックスの中のボタンをクリックすると、CONTAININGボックスの背景が色を変えるはずです。

色の変更は、ボックスの初期プロトタイプ機能で処理されます。

ただし、上記のコードで間違ったボックスに色が付いています。適切なコンテナにはどのように対処しますか？

私はここで何が欠けていますか？

Answer 1

あなたはvarの文が欠落している：

$this = this; 

は次のようになります。

var $this = this; 

varに追加して、期待どおりに動作します：http://jsfiddle.net/GBCav/8/

説明：あなたはvarを省略した場合キーワードでは、$thisをスコープに限定するのではなく、グローバル変数に割り当てます.init()メソッドの代入は.init()にコールするときに行われるため、2番目のインスタンスでこのメソッドを呼び出すと$thisが2番目のインスタンスに再割り当てされ、最初のインスタンスのイベントハンドラの$thisの値にも影響します。