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

   <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的引用还是赋值?


蓝山帝景
浏览 563回答 1
1回答

守候你守候我

你这样的学习方法真的太可怕啦!.闭包会都输出4的原因是, 函数定义时并不执行.var&nbsp;nodeList&nbsp;=&nbsp;document.getElementsByTagName('li');for(var&nbsp;i&nbsp;=&nbsp;0;i&nbsp;<&nbsp;nodeList.length;i++){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;nodeList[i].onclick&nbsp;=&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i); &nbsp;&nbsp;&nbsp;&nbsp;} }之所以输出的全部是3, 是因为li绑定的事件处理函数在定义时并未执行, 当你触发li的点击事件时函数执行, 此时的i是3,当然会输出3.for(var&nbsp;i&nbsp;=&nbsp;0;i&nbsp;<&nbsp;nodeList.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;nodeList[i].num&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;nodeList[i].onclick&nbsp;=&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(this.num); &nbsp;&nbsp;&nbsp;&nbsp;} }为li增加一个属性, 为num属性赋值是在什么时候发生的? 他并没有放到函数里, 所以这个语句直接就执行啦. 此时i就分别为0,1,2,3, 等事件处理函数执行的时候, 输出的是对应li的num值, 而这个时候的num已经在上一步就为其赋值啦. 当然会输出0,1,2,3for(var&nbsp;i&nbsp;=&nbsp;0;i&nbsp;<&nbsp;nodeList.length;i++){&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;nodeList[i].onclick&nbsp;=&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(num); &nbsp;&nbsp;&nbsp;&nbsp;} }这个是因为, num变量被覆盖了值.假设代码改成这样:var&nbsp;num;for(var&nbsp;i&nbsp;=&nbsp;0;i&nbsp;<&nbsp;nodeList.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;if(i&nbsp;===&nbsp;1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;num&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;nodeList[i].onclick&nbsp;=&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(num); &nbsp;&nbsp;&nbsp;&nbsp;} }你说他会输出什么?我说的学习方法可怕, 是你不好好看书, 理解他的真义. 就这样钻这些牛角尖. 是会出事儿的.
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript