Javascript:: this.value 在 for 循环中不能正常工作？ [复制]

Question

我的代码几乎可以说明我将要实现的目标，但只是为了澄清......

我想在长按（鼠标按住 200 毫秒）后返回一个输入值。

它在 for 循环之外运行良好，但在循环内部却似乎不行。

对于 this.value，它返回 undefined，对于 gangina[i].value，它什么也不返回。

这里是 jsFiddle：

http://jsfiddle.net/hezi_gangina/nxao19oc/

这是我的代码：

<input type=button value=1>
<input type=button value=2>

<script>

var hezi;
var gangina=document.getElementsByTagName("input");

alert(gangina[1].value); //THIS IS OK! :)

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

    gangina[i].onmousedown=function()
    {
        hezi=setTimeout
        (
            function()
            {
                alert('this = '+this.value); // = undefined
                alert('gangina['+i+'] = '+gangina[i].value); // = nothing
            },200
        );
    }

}

</script>

这里需要小调整...

Answer 1

DEMO

您可能需要将函数包装在 IIFE 中，该函数将绑定 i 值。

由于内部 mousedown 事件处理程序将在某个时刻执行，它只会记住 i 的最后一个值。另请注意，您也忘记在 i 前面提及var。

如果您想分配正确的i 值，最好将内部函数包装在 IIFE 函数中，因为此时事件处理程序将引用本地范围的i。所以它会一直记住i的正确值。

for(var i=0;i<gangina.length;i++)
{
   (function(i) {
    gangina[i].onmousedown=function()
    {
        var that = this;
        hezi=setTimeout
        (
            function()
            {
                alert('this = '+that.value); // = undefined
                alert('gangina['+i+'] = '+gangina[i].value); // = nothing
            },200
        );
    }
  })(i);

}

同样在setTimeout 内部，this 将引用Window 对象而不是DOM 元素。