javascript - 如何在 javascript 事件处理程序中获取对象？

Question

我试图在 onclick 事件处理函数中获取一个对象。

但它没有按我预期的方式工作。

例如，如果我运行这段代码:

var entries = [{id: 1},{id: 2},{id: 3}];

for (var i = 0; i < entries.length; i++) {

    var entry = entries[i];

    document.getElementById(entry.id).onclick = function () { 
        console.log("this.id: " + this.id);
        console.log("entry.id: " + entry.id);
    };

}

我期望的是:

this.id: 1
entry.id: 1

this.id: 2
entry.id: 2

this.id: 3
entry.id: 3

但我得到的是:

this.id: 1
entry.id: 3

this.id: 2
entry.id: 3

this.id: 3
entry.id: 3

为什么entry对象总是id为3的entry？

如何在点击事件处理程序中获取正确的入口对象？

Answer 1

解决此问题的一种方法是:

var entries = [{id: 1},{id: 2},{id: 3}];

for (var i = 0; i < entries.length; i++) {

    var entry = entries[i];

    document.getElementById(entry.id).onclick = (function (id) {
        return function () { 
            console.log("this.id: " + this.id);
            console.log("entry.id: " + id);
        };
    })(entry.id);

}

您可以使用自执行函数(其目的是提供一个 entry.id 将绑定(bind)到的闭包)返回一个绑定(bind)到特定 id 的新 onclick 处理程序。

如果您不这样做，您所有的 onclick 处理程序都会绑定(bind)到同一个入口变量，并以它在 for 循环期间收到的最后一个值结束。