这作用域的问题还是没搞清楚

为什么

    var btns = document.getElementsByTagName('button');

         for (var i = 0; i < 3; i++) {

           click(i);

   }

   function click(i){

       btns[i].onclick = function () {

    alert(i + 1);

    };

   }

这样就每个按钮对应一个i呢？

像之前的就都循环完毕后，每个按钮对应的都是4呢？这个该怎么分析呢？