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

Question

   function aa(){
    }
    aa.prototype.init=function(){
            setTimeout(this.init,1000);
            console.log(1);
        }
    new aa().init();
    
    为什么这里的console.log(1)只有执行了一次？

Answer 1

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

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();

Answer 2

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

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

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

Answer 3

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

Answer 4

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();

Answer 5

输出是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();