詳解JS中定時器setInterval和setTImeout的this指向問題

前言

Js是一個單線程語言，可以通過setTimeout()和setInterval()來設置代碼在指定時刻運行，前者是在指定時間後執行，後者是指每隔一段時間執行。兩者的使用方法類似。

最近在練習寫一個小例子的時候用到了定時器，發現在setInterval和setTimeout中傳入函數時，函數中的this會指向window對象，詳細的介紹通過一個示例展開，一起來看看吧。

如下例：

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(this.num);
 }, 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　列印的為obj.num，值為1
obj.getNumLater()//0　　列印的為window.num，值為0

從上述例子中可以看到setTimeout中函數內的this是指向了window對象，這是由於setTimeout()調用的代碼運行在與所在函數完全分離的執行環境上. 這會導致這些代碼中包含的 this 關鍵字會指向 window (或全局)對象。詳細可參考MDN setTimeout

但是在setTimeout中傳入的不是函數時，this則指向當前對象，如下例：

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(console.log(this.num), 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　列印的為obj.num，值為1
obj.getNumLater()//1　　列印的為obj.num，值為1

從以上兩個例子可以看出，當在setTimeout中傳入的參數為函數時，函數內部的this才會指向window對象。

當在setTimeout中傳入了一個函數，若想要讓this指向正確的值，可以使用以下兩種比較常用的方法來使this指向正確的值：

1.將當前對象的this存為一個變數，定時器內的函數利用閉包來訪問這個變數

如下：

var num = 0;
function Obj (){
 var that = this; //將this存為一個變數，此時的this指向obj
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(that.num); //利用閉包訪問that，that是一個指向obj的指針
 }, 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　列印的為obj.num，值為1
obj.getNumLater()//1　　列印的為obj.num，值為1

這種方法是將當前對象的引用放在一個變數里，定時器內部的函數來訪問到這個變數，自然就可以得到當前的對象。

2.利用bind()方法

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(this.num);
 }.bind(this), 1000) //利用bind()將this綁定到這個函數上
 }
}
var obj = new Obj; 
obj.getNum();//1　　列印的為obj.num，值為1
obj.getNumLater()//1　　列印的為obj.num，值為1

bind()方法是在Function.prototype上的一個方法，當被綁定函數執行時，bind方法會創建一個新函數，並將第一個參數作為新函數運行時的this。在這個例子中，在調用setTimeout中的函數時，bind方法創建了一個新的函數，並將this傳進新的函數，執行的結果也就是正確的了。關於bind方法可參考 MDN bind

以上兩種方法都是比較常用的，當然如果使用call或apply方法來代替bind方法，得到的結果也是正確的，但是call方法會在調用之後立即執行，那樣也就沒有了延時的效果，定時器也就沒有用了，所以推薦使用上述兩種方法來將this傳進setTimeout和setInterval中。

本文轉載於腳本之家，作者：陌路黃昏後   的文章，原文鏈接：https://m.jb51.net/article/102232.htm

如有侵權，請告知刪除