イベントにバインドされた同じメソッドの複数のインスタンスを区別する方法はありますか？

Question

クラスFooがあり、このクラスの複数のオブジェクトのメソッドbar()が要素のclickイベントにバインドされているとします（下記のコードスニペットを参照）。その要素をクリックした後、私はコンソールには、以下を表示するために期待する：

name: a 
name: b 
name: c 

しかし、唯一の最後のオブジェクトのbar()メソッドが呼び出されます：

name: c 

これはなぜでしょうか？なぜ他の人が呼ばれていないのですか？私はそれが$.off()のためであると思われます。そうであれば、bar()メソッドごとに$.off()と$.on()を呼び出す方法を区別する方法がありますか？

Answer 1

function Foo(name) { 
 
    this.name = name; 
 
}; 
 

 
Foo.prototype.bar = function (e) { 
 
    var foo = e.data.foo; 
 
    console.log("name:", foo.name); 
 
} 
 

 
$.each(["a","b","c"], function (index, value) { 
 
    var $elem = $("#button-test"); 
 
    var obj = new Foo(value); 
 

 
    $elem.off("click", obj.bar); // To ensure each object's method isn't bound multiple times 
 
    $elem.on("click", { foo: obj }, obj.bar); 
 
});

<button id="button-test" type="button">Test</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

私は obj.bar.bind(obj)を使用して解決策を見つけた：

function Foo(name) { 
 
    this.name = name; 
 
}; 
 

 
Foo.prototype.bar = function() { 
 
    console.log("name:", this.name); 
 
} 
 

 
$.each(["a","b","c"], function (index, value) { 
 
    var $elem = $("#button-test"); 
 
    var obj = new Foo(value); 
 
    var barEvent = obj.bar.bind(obj); // Added this 
 
    $elem.off("click", barEvent); // To ensure each object's method isn't bound multiple times 
 
    $elem.on("click", barEvent); 
 
});

<button id="button-test" type="button">Test</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>