内联函数中的 Javascript 变量范围

Question

为什么这不能按预期工作：

$(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](); 
});

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

我希望：

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

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

谁能帮我理解这里发生了什么？

非常感谢， 问候帕特里克

---------解决方案------

var data 已在函数范围内，但之后仍会更改。

因此最好的解决方案是bind():

$(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](); 
});

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

<div>

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 以友好的方式一起生活。