javascript - JS关于函数绑定属性数值问题。。。

Question

 <script type="text/javascript">     
        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
             var fn=function(){
                 return fn.index;
             }
             fn.index=i;
             fnArr[i]=fn;
        }
        console.log( fnArr[3]());  //
     </script>

为什么第一段代码弹出的是9；

 <script type="text/javascript">     
        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
          fnArr[i] = function star(){
                return star.index;
            };
          fnArr[i].index=i;      
        }
        console.log( fnArr[3]() );  //
     </script>

为什么这段代码弹出的是3；两者区别在哪里。。。

Answer 1

由于变量提升，第一段代码相当于

    var fnArr = [];
    var fn;
    for (var i = 0; i < 10; i ++) {
         fn=function(){
             return fn.index;
         }
         fn.index=i;
         fnArr[i]=fn;
    }
    console.log( fnArr[3]());  //
    

也就是相当于对fn这个变量重复赋值9次，而且每次都覆盖，所以只保留最后一次9的状态，想达到你要的效果可以用let

'use strict';
var fnArr = [];

for (var i = 0; i < 10; i ++) {
     let fn=function(){
         return fn.index;
     }
     fn.index=i;
     fnArr[i]=fn;
}
console.log( fnArr[3]());

请在较新版本的chrome下执行

Answer 2

很明显： 在第一段：

fn.index=i;
fnArr[i]=fn;
//这里所有的index属性赋值只是以fn对象为基础！所以每次都会重置index，直到循环结束！

然后第二段：

fnArr[i].index=i;      //这里是针对fnArr数组的每个index属性赋值，因此每个值都是唯一且不同的！
//那么当你再次输出的时候，每次都会找到对应不同的i;

最终两者的赋值作用域不同，导致结果的差异

Answer 3

最近这两天在看Javascript；
楼上解答是对的；
题主的问题，可以分为三个概念（权威指南中的名词）的问题：
声明提前，函数定义，函数声明

var 定义的变量，变量声明会提到全局/局部顶部；但，赋值在var语句的地方执行，顶部获取变量值为undefined；

var fn=function(){
   return fn.index;
 }
 这个函数定义了fn变量，然后赋值；如楼上所说，重复赋值9次，每次都被覆盖；