javascript使用setTimeout、setInterval時找不到變量的問題

我們在某個作用域內或者在自己定義的一個類里調用setTimeout、setInterval會經常會遇到找不到某個變量的錯誤。

比如下面這個例子：

 

window.onload = function(){
    manager.init();
};

var manager = {
    init: function() {
        slef = this;
        this.name = "manager";
        setInterval(this.timerMonitor, 1000);
    },
    
    timerMonitor: function(){
        console.log(this.name);
    }
}

我們來看下chrome下的運行結果：

並沒有按預想打印manager。因為this.name這個變量是undefined狀態。

為什么是這樣的結果，因為setInterval是window對象的方法，這是個全局的方法，console.log里的this這個時候指向的應該是window對象，我們可以來調試一下。

 

在console.log這行打上斷點：

我們可以看到這個時候的this確實是指向window對象的。

 

 

 

那么怎么解決這個問題呢？使用匿名函數就可以了

只需要把setInterval(timerMonitor, 1000);改為setInterval(function(){self.timerMonitor()}, 1000);就可以了。

完整代碼如下：

window.onload = function(){
    manager.init();
};

var manager = {
    init: function() {
        self=this;
        this.name = "manager";
        setInterval(function(){self.timerMonitor()}, 1000);
    },
    
    timerMonitor: function(){
        console.log(this.name);
    }
}

再來看Chrome下的運行結果如下圖：

這個時候this.name變量被正確打印出來了。