为什么这里settimeout只执行了一次

   function aa(){
    }
    aa.prototype.init=function(){
            setTimeout(this.init,1000);
            console.log(1);
        }
    new aa().init();
    
    为什么这里的console.log(1)只有执行了一次?
阅读 6.8k
5 个回答

你上面的代码和如下代码相同的

function aa(){
}
aa.prototype.init=function(){
        var tmp=this.init;
        console.log(tmp);
        setTimeout(tmp,1000);
        console.log(1);
    }
var newaa=new aa();
newaa.init();

newaa.init();init方法执行时,将newaa的init方法赋值给tmp,那么此时tmp指向的时init指向的函数对象本身,和newaa对象没有关系了。setTimeout接收一个函数对象或一个字符串表示的代码作为其第1个参数,
接下来设置了一个定时器setTimeout(tmp,1000);,在1000毫秒后执行tmp函数。tmp函数为

function(){
    var tmp=this.init;
    setTimeout(tmp,1000);
    console.log(1);
}

最后执行console.log(1);
输出1
定时器某个时刻触发后执行tmp函数对象,那么此时this为global对象,global对象是没有init方法的,也就是此时tmp的undefined,setTimeout(undefined,1000); setTimeout对一个undefined对象设置定时器是没有任何效果的,且不会报错的!
最后执行console.log(1);
输出1
因为没有新的定时器被设置,所以不会再有输出

解决这个问题方法
A

function aa(){
}
aa.prototype.init=function(){
        var that=this;
        setTimeout(function(){
            that.init();
        },1000);
        console.log(1);
    }
var newaa=new aa();
newaa.init();

B
或bind,可能会有兼容性问题
Chrome7 /Firefox 4/IE 9/Opera 11/Safari 5 都是OK的

function aa(){
}
aa.prototype.init=function(){
        setTimeout(this.init.bind(this),1000);
        console.log(1);
    }
var newaa=new aa();
newaa.init();

明明执行了两次啊....

clipboard.png

第一次是本来函数执行的,第一次执行的时候 setTimeout 把 this.init 队列到末尾去执行了,再第二次的时候 setTimeout 中的 this.init 由于脱离了 aa 类所以并不知道 this.init 函数是哪个,所以第二次的 setTimeout 是失败的,但是第二次的 console 是成功的。所以总共有两次。

如果想要一直循环的话可以使用 setTimeout(this.init.bind(this), 1000);,将 this.init 中的 this 绑定到 aa 上就可以保证每次都能定位到是 aa.init 了。

第一次和第二次的this不同。第二次的this 是undefined。

this指向错误了!!在定时器里的this都是指向window,window是没有init方法,修正下指向
function aa(){
        }
        aa.prototype.init=function(){
            var _this=this;
                setTimeout(function(){
                    _this.init();
                },1000);
                console.log(2);
            }
        new aa().init();

输出是1,1 这两个,console执行了两次,第一眼看着有点无限循环的意思,不过不是这样的。实际上,一共执行了两次init函数,不过第二次的时候this指向出了问题,不过有点小问题this.init在那个地方,到底是个什么?

function aa(){
 }
 aa.prototype.init=function(){
            setTimeout(function(){console.log(this.init);},1000);
            console.log(1);
        }
    new aa().init();
    
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题