2

正しく動作しないコードは次のとおりです。

$(document).ready(function() {
    for (var i = 0; i < 3; i++) {
        var bt = new HrButton("btn" + i);                    
        bt.setOnclick(function() {
            alert(bt.name + " clicks = " + bt.cntClick);
            bt.cntClick = bt.cntClick + 1;
        });
        $("#container").append(bt.toHtml());
    }
});

bt関数内で の3 つのインスタンスを維持するにはどうすればよいですか。現状では、各 onclick でbt参照されます。btn2

4

1 に答える 1

5

が適切に実装されている場合setOnclick、おそらく次のことができるはずです。

bt.setOnclick(function() {
    alert(this.name + " clicks = " + this.cntClick);
    this.onclick = this.cntClick + 1;
});

それ以外の場合は、コールバック関数ごとに新しいスコープを作成して、それぞれが独自の を持つようにする必要がありますbt。それを行う1つの方法は次のとおりです。

bt.setOnclick(function(bt){
    return function(){
        alert(bt.name + " clicks = " + bt.cntClick);
        bt.onclick = bt.cntClick + 1;
    };
}(bt));

コメント応答

コールバック内でthis関連するHrButton( ではなく) を参照するように setOnClick を実装するには、次のコードを使用できます ( SHIM バインドしない限り、最新のブラウザーでのみ機能します)。element

var self = this;
self.setOnClick = function(fnOnClick) {
    element.onclick = fnOnClick.bind(self);
};

jQuery を使用しているため、次のコードはクロスブラウザーと同等になります。

var self = this;
self.setOnClick = function(fnOnClick) {
    element.onclick = $.proxy(fnOnClick, self);
};

それ以外の場合、これはライブラリなしですべてのブラウザーで機能し、わずかに読みにくくなります。

var self = this;
self.setOnClick = function(fnOnClick) {
    element.onclick = function(event) {
        return fnOnClick.call(self, event);
    };
};
于 2013-07-15T17:36:59.083 に答える