javascript - javascript中java的final相当于什么

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 在每个 onclick 中引用 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)，您可以使用以下代码代码(仅适用于现代浏览器，unless you SHIM bind):

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