Область применения переменных 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 жить вместе по-дружески.