Question

我有一个带有两个属性的基本javascript类。我想在点击事件中记录一个值。这是我得到的：

function Clicker(/*string*/var1, /*id*/var2) {
    this.name = var1;
    this.clickerid = var2;
    this.clickevent = function() {
        console.log("1: " + this.name);
        console.log("2: " + this);
        console.log("3: " + window.testClicker.name);
    };

    var element = document.getElementById(this.clickerid);
    element.addEventListener("click", this.clickevent, false);
}

window.onload = function() {
    window.testClicker = new Clicker("lorem ipsum", "checkbox1");
};

<input id="checkbox1" type="checkbox" value="1" checked>

当我运行测试时，我在日志中看到以下内容：

1: undefined
2: <input id="checkbox1" type="checkbox" value="1" checked>
3: lorem ipsum

我期待看到第一和第三行匹配。建议？

Answer 1

this的值取决于调用函数的上下文。

当事件监听器触发时，在与事件关联的元素的上下文中调用该函数 - 而不是复制函数的对象。

使用bind覆盖上下文（它会生成一个新函数，在您定义的任何上下文中调用原始函数）。

element.addEventListener("click", this.clickevent.bind(this), false);

这相当于：

element.addEventListener(
    "click", 
    function (context) {
        return function () {
            context.clickevent();
        };
    }(this),
    false
);

Answer 2

我认为这可能是context问题，可以进行以下工作：

function Clicker(/*string*/var1, /*id*/var2) {
    this.name = var1;
    this.clickerid = var2;
    var self = this;
    this.clickevent = function() {
        console.log("1: " + self.name);
        console.log("2: " + this);
        console.log("3: " + window.testClicker.name);
    };

    var element = document.getElementById(this.clickerid);
    element.addEventListener("click", this.clickevent, false);
}

你可以看到第二个console.log，this是指复选框，而不是Cliker对象

Answer 3

为了完整起见，有三种可能的解决方案：

使用dm03514's answer中建议的闭包变量。
按Quentin's answer。

bind

使用Dealing with Scope in Object methods containing 'this' keyword called by Event Listeners 建议的事件监听器界面/ handleEvent。

Javascript Class＆amp;事件监听

3 个答案: