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 ）的回調中，你可以使用下面的代碼（在現代瀏覽器只能作用， 除非你墊片綁定 ）：

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