Javascript::this.value 在 for 循环内无法正常工作？

Question

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

我想在长按(鼠标按下200ms)后返回输入值。

它在 for 循环之外工作得很好，但在循环内部似乎不行。

对于this.value它返回未定义和 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 内，这将绑定(bind) 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 元素。