Question

我有一个对象来计算输入中的字符数，并在输入旁边的div中显示字符数。我想向div添加一个click事件监听器，当单击该div时，会调用创建div的对象中的函数。我现在很困惑，所以这里有一些代码：

var CharDisplay = function(input, max) {
    this.input = input;
    this.maxChars = max;
    this.direction = "countUp";

    this.div = document.createElement("div");
    this.div.setAttribute("class", "charCounter");
    this.input.parentNode.appendChild(this.div);

    var that = this; // I don't like doing this

    // This function toggles the direction property and tells the extension
    // to update localStorage with the new state of this char counter
    var toggleDirection = function() {
            that.direction = that.direction === "countUp" ? "countDown" : "countUp";    
            that.update();
            chrome.extension.sendRequest({
                    "method" : "updateCharCounter",
                    "id" : that.input.id,
                    "state" : { 
                            "direction" : that.direction,
                            "limit" : that.maxChars
                    }
            });
    }

    this.div.addEventListener("click", toggleDirection);

}

我想要的行为是当点击div时，Char计数器在倒计时（'15 chars left'）和向上计数（'45 of 45 chars'）之间切换。我将char计数器的状态存储在localStorage中，这样无论用户离开char计数器的状态如何，当它们返回时都会找到它。

现在这段代码实际上工作得很好，但是我无法摆脱这种感觉，即更优雅的方式。我不得不添加var that = this以使其工作，但我总觉得这是'黑客'，如果可以，我会尽量避免它。

你能想到一个更好的方法来实现这个目标，还是我应该停止尝试修复那些没有破坏的东西？

Answer 1

var that = this技巧在JavaScript中很常见。

另一种方法是将函数绑定到给定的上下文：

function bind(context, fun) {
    return function() {
        fun.call(context, arguments);
    };
}

此函数返回一个函数，该函数在调用时将使用给定的fun调用context。

你可以像这样使用它：

this.div.addEventListener("click", bind(this, toggleDirection));

使用此toggleDirection将this作为上下文进行调用this中toggleDirection将与您调用addEventListener时的{{1}}相同}）。

另见Function.bind。

将eventListener添加到可以引用创建div的对象的div

1 个答案: