UMD判断amd和commonJS有先后顺序吗？

Question

   <ul>         <li>0</li>         <li>1</li>         <li>2</li>         <li>3</li>     </ul>var nodeList = document.getElementsByTagName('li');for(var i = 0;i < nodeList.length;i++){             nodeList[i].onclick = function(){                     console.log(i);     } } 这里每个li的onclick触发后 都会输出4 ,因为console.log(i)只是对i变量的引用 如果改成一下代码：for(var i = 0;i < nodeList.length;i++){     nodeList[i].num = i;     nodeList[i].onclick = function(){                     console.log(this.num);     } } 可以正常输出0,1,2,3  猜测原因是在为li创建onclick事件的同时创建属性num所以num和onclick都是属于li的一部分， 那么再变化一下代码for(var i = 0;i < nodeList.length;i++){    var num = i;     nodeList[i].onclick = function(){                     console.log(num);     } } 这里依然会输出4，如果说是因为引用了num，而num又引用了i  那么，为什么以nodeList[i].num = i 的可行？  为li创建了属性num的同时  nodeList[i].num = i 算是对i的引用还是赋值？

Answer 1

你这样的学习方法真的太可怕啦!.

闭包会都输出4的原因是, 函数定义时并不执行.

var nodeList = document.getElementsByTagName('li');for(var i = 0;i < nodeList.length;i++){        
    nodeList[i].onclick = function(){            
        console.log(i);
    }
}

之所以输出的全部是3, 是因为li绑定的事件处理函数在定义时并未执行, 当你触发li的点击事件时函数执行, 此时的i是3,当然会输出3.

for(var i = 0;i < nodeList.length;i++){
    nodeList[i].num = i;
    nodeList[i].onclick = function(){            
        console.log(this.num);
    }
}

为li增加一个属性, 为num属性赋值是在什么时候发生的? 他并没有放到函数里, 所以这个语句直接就执行啦. 此时i就分别为0,1,2,3, 等事件处理函数执行的时候, 输出的是对应li的num值, 而这个时候的num已经在上一步就为其赋值啦. 当然会输出0,1,2,3

for(var i = 0;i < nodeList.length;i++){    var num = i;
    nodeList[i].onclick = function(){            
        console.log(num);
    }
}

这个是因为, num变量被覆盖了值.
假设代码改成这样:

var num;for(var i = 0;i < nodeList.length;i++){
    if(i === 1) {
        num = i;
    }
    nodeList[i].onclick = function(){            
        console.log(num);
    }
}

你说他会输出什么?

我说的学习方法可怕, 是你不好好看书, 理解他的真义. 就这样钻这些牛角尖. 是会出事儿的.