问答详情
源自:4-1 JS多物体动画

startMove(this,100); 为什么这里的this 不能用 oDiv[i]替代????

window.onload=function (){

   var oDiv=document.getElementsByTagName('div');

   for(i=0;i<oDiv.length;i++){

   oDiv[i].timer=null;

   oDiv[i].alpha=30;

   oDiv[i].onmouseover=function () {startMove(this,100);}  //为什么这里的this 不能用 oDiv[i]替代????

   oDiv[i].onmouseout=function(){startMove(this,30);}

}

}


function startMove(obj,iTarget) {

var speed=obj.alpha>iTarget?speed=-5:speed=5;

   clearInterval(obj.timer);

   obj.timer=setInterval( function(){

    if (obj.alpha==iTarget) {  clearInterval(obj.timer);} 

    else {obj.alpha+=speed;obj.style.opacity=obj.alpha/100;}

   },30) 

按我的理解, 这里的this其实本质就是oDiv[i]

如果改了了oDiv[i]以后, 报错提示obj.alpha 错误, 为什么?

提问者:rainy_li3676598 2016-11-12 20:29

个回答

  • 冷月诗魂
    2016-11-14 17:24:05

    函数是先定义再执行的,比如你写的

     oDiv[i].onmouseover=function () {startMove(this,100);}  //为什么这里的this 不能用 oDiv[i]替代????

    这段代码在被解析的时候是这样的 oDiv[i].onmouseover=function () {},

    里面的代码还不会被执行,当所有函数被定义完之后在执行里面的代码,而这个时候oDiv[i]已经被释放掉了,不存在了,你再写oDiv[i]自然就会报错 。

    这只是this的其中一种用法,还有很多,基本用法就是this指向当前调用函数的那个对象,这里的对象就是oDiv[i],其他还有很多方法就不说了,你可以自己搜下

  • 天之殇
    2016-11-12 21:37:50

    个人感觉此处的this应该是指针的效果,指向的就是鼠标滑过的div,

    window.onload = function(){
       var aLi = document.getElementsByTagName("li");---------aLi[i]的生命周期只在这个大花括号中
       for(var i=0;i<aLi.length;i++){
           aLi[i].timer = null;
           aLi[i].alpha = 0;
           aLi[i].onmouseover = myMouseOver;
       }
    }
    function myMouseOver(){
       startMove(this,100,'opacity');--------此处如果是aLi[i]那么对于这个方法来说就没有这个变量存在
    }

    以上是自己试验的结果,不知道对不对,如果不对告诉我下