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]);

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

Javascript 内联函数中的变量作用域

Javascript variabes scope in inline functions

javascript

variables

scope

inline-functions