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變量被正確打印出來了。