将变量传递给事件 javascript - 没有闭包，没有 jq，避免 evals &这样的

Question

好吧，每个人都已经解决了这个问题，但是我觉得还没有更了解该怎么做。

我想要一个循环来设置一堆点击处理程序，并为每个处理程序提供唯一的参数。我现在正在做这样的事情：

for (thisThing in things){
    myDiv=document.createElement('img');

    myDiv.onclick=function(){
        // do somehting!
        // but don't do anything with "thisThing" 
        // because it's got the wrong value in it by the time you call it!
        // but this function has to have the value of "thisThing" to work, dammit!
    }
}

• 到处都说这个问题的解决方案是闭包 - 哇太棒了！除了闭包会破坏即（对吗？）
• 否则，我可以当场评估代码，在变量中进行烘焙，但这充其量看起来很丑陋，而且似乎可能会破坏一些东西

那么这会给我留下什么？倒闭好吗？评估好吗？我是唯一一个在网络上动态创建按钮的人吗？！？任何帮助将不胜感激。对于这个基本问题和事实上经常回答的问题感到抱歉。

此页面具有迄今为止我找到的最完整的答案，但是，它表明闭包始终是解决方案。诅咒！ http://www.howtocreate.co.uk/referencedvariables.html

Answer 1

闭包不会破坏 IE。

(function(someThing) {
    myDiv.onclick=function(){
       // Access it as "someThing"
    }
})(thisThing);

jsFiddle。

问题是分配给 onclick 属性的函数创建了一个闭包，可以在其中访问其父变量。

当您准备好单击某个元素时，其 thisThing 已递增到终止循环的最终值（在您的情况下迭代的最后一个属性），因为它访问外部变量，而不是复制。

通过使用新的自调用函数创建新的闭包并传递 thisThing，其值将成为变量 someThing 并仅存在于内部函数内部。

这是缓解这个已知问题的方法之一。

请注意，在 IE6 和 IE6 中7.存在内存泄漏。咨询 RobG 或 Raynos 对此问题的解决方案的回答。

Answer 2

问题是在循环中创建函数是坏。一点点重构就能让你的问题消失。

function createDiv(thing) {
    var div = ...
    div.onclick = ...
}

for (thisThing in things) {
    createDiv(thisThing);
}

但在旧版本的 IE 中这仍然会泄漏内存。

这是因为这段代码：

var div = ...;
div.onclick = function() { ...;

div 有一个对函数的引用，而函数有一个对 div 的引用。这是一个循环引用。要解决这个问题，您需要一个回调工厂。

function createDiv(thing) {
    var div = ...
    div.onclick = createCallback(thing);
}

function createCallback(thing) {
    return function() {
         ...
    };
}

这意味着您的 onclick 回调没有对您的 div 元素的引用。

Answer 3

我想要一个循环来设置
一堆点击处理程序并且每个都有
处理程序给出唯一的参数。我是
现在正在做这样的事情：

> for (thisThing in things){
>     myDiv=document.createElement('img');
> 
>     myDiv.onclick=function(){
>         // do somehting!
>         // but don't do anything with "thisThing" 
>         // because it's got the wrong value in it by the time you call it!
>         // but this function has to have the value of "thisThing" to work,
> dammit!
>     } }

到处都说这个问题的解决方案是闭包

不，你根本不想要闭包。您正在尝试不关闭。

除了闭包会破坏 ie（对吗？）

错误。

IE 和涉及 DOM 元素的循环引用存在问题，导致内存泄漏。这个问题已基本得到解决，但仍存在很多误解。例如：

function addListener(element) {
    var someVar = ...;
    element.onclick = function() {
        // this function has a closure to someVar
    };
}

当调用 addListener 时，导致涉及 someVar 闭包的循环引用。有一些非常简单的修复方法。您想要做的是不关闭 someVar，而是使用该值。这可以通过多种方式完成，但最简单的是：

函数 addListener(元素) {
var someVar = ...;
element.onclick = (函数( differentVar ) {
警报（不同的变量）；
})(一些VAr);
}

所以现在 someVar 的值被传递给 differentVar，它是内部函数的局部变量。当然，内部函数可能仍然具有 someVar 的闭包，但是使用立即调用的匿名函数会破坏 differenceVar 和 someVar 之间的闭包。

作为其中之一，无论如何关闭都没有问题。但是，如果您附加了多个侦听器，并且它们都引用了 someVar，那么它们都共享相同的值。在两者之间使用立即调用的匿名函数会破坏该链。

编辑

抱歉，最后一个例子不正确，我的错。

function addListener(element) {
    var someVar = ...;
    element.onclick = (function(differentVar) {
        return function() {
          alert(differentVar);
        };
    })(someVAr);
}

Answer 4

闭包不会破坏 IE。

for (thisThing in things){
    if(!things.hasOwnProperty(thisThing)) continue;

    var myDiv = new document.createElement('img');
    myDiv.onclick = (function(thing){
        // Instance specific vars and other thigns
        return function() {
            // More stuff
        }
    })(thisThing);
}