Question

这是我的代码无法正常工作：

$(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的三个实例。现在，bt在每次点击时都会引用btn2。

Answer 1

如果setOnclick很好地实现了，你应该可以做到：

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

否则，您需要为每个回调函数创建一个新范围，以便它们各自拥有自己的bt。一种方法是：

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

评论回复

要实现setOnClick以使this引用回调中的相关HrButton（而不是element），您可以使用以下代码（仅适用于现代浏览器，{ {3}}）：

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);
    };
};

什么是Java的javascript最终版本

1 个答案: