Question

为什么这不按预期工作：

＆＃13;

$(function(){
   var datas=[[1],[3]];
   var functions=[];
   for(var i in datas ){ 
   	var data=datas[i];
    functions.push(function(){
    	$("div").append($("<p/>").text("data[0]="+data[0]+", datas["+i+"][0]="+datas[i][0]));
    });
   }
   for(var i in functions )
   	functions[i](); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div />

＆＃13;

我期待：

data[0]=1, datas[0][0]=1

data[0]=3, datas[1][0]=3

有人可以帮我理解这里发生的事情吗？

非常感谢，问候帕特里克

---------解-------

var data已经超出了函数的范围，但之后仍然会发生变化。

因此，最佳解决方案是bind()：

＆＃13;

$(function(){
   var datas=[[1],[3]];
   var functions=[];
   for(var i in datas ){ 
   	var data=datas[i];
    functions.push(function(data){
    	$("div").append($("<p/>").text("data[0]="+data[0]+", datas["+i+"][0]="+datas[i][0]));
    }.bind(null,data));
   }
   for(var i in functions )
   	functions[i](); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>

＆＃13;

Answer 1

这完全是关于范围的。尝试改变

var data=datas[i];
functions.push(function(){
    $("div").append($("<p/>").text("data[0]="+data[0]+", datas["+i+"][0]="+datas[i][0]));
});

到

(function (data) {
    functions.push(function(){
        $("div").append($("<p/>").text("data[0]="+data[0]+", datas["+i+"][0]="+datas[i][0]));
    });
})(datas[i]);

在for循环中，data的范围值已更改。这就是调用functions时使用data的最后修改值的原因。这就是为什么我们创建了一个新的范围，其中data和function以友好的方式生活在一起。

Javascript变量内联函数的范围

1 个答案: