快捷導(dǎo)航

詳解JS中定時(shí)器setInterval和setTImeout的this指向問(wèn)題

更新時(shí)間：2017年01月06日 10:47:07 作者：陌路黃昏后

在js中setTimeout和setInterval都是用來(lái)定時(shí)的一個(gè)功能，下面這篇文章主要給介紹了JS中setInterval和setTImeout的this指向問(wèn)題,文中通過(guò)示例介紹的很詳細(xì)，有需要的朋友可以參考借鑒，一起來(lái)看看吧。

前言

Js是一個(gè)單線程語(yǔ)言，可以通過(guò)setTimeout()和setInterval()來(lái)設(shè)置代碼在指定時(shí)刻運(yùn)行，前者是在指定時(shí)間后執(zhí)行，后者是指每隔一段時(shí)間執(zhí)行。兩者的使用方法類似。

最近在練習(xí)寫(xiě)一個(gè)小例子的時(shí)候用到了定時(shí)器，發(fā)現(xiàn)在setInterval和setTimeout中傳入函數(shù)時(shí)，函數(shù)中的this會(huì)指向window對(duì)象，詳細(xì)的介紹通過(guò)一個(gè)示例展開(kāi)，一起來(lái)看看吧。

如下例：

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中函數(shù)內(nèi)的this是指向了window對(duì)象，這是由于setTimeout()調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上. 這會(huì)導(dǎo)致這些代碼中包含的 this 關(guān)鍵字會(huì)指向 window (或全局)對(duì)象。詳細(xì)可參考MDN setTimeout

但是在setTimeout中傳入的不是函數(shù)時(shí)，this則指向當(dāng)前對(duì)象，如下例：

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

從以上兩個(gè)例子可以看出，當(dāng)在setTimeout中傳入的參數(shù)為函數(shù)時(shí)，函數(shù)內(nèi)部的this才會(huì)指向window對(duì)象。

當(dāng)在setTimeout中傳入了一個(gè)函數(shù)，若想要讓this指向正確的值，可以使用以下兩種比較常用的方法來(lái)使this指向正確的值：

1.將當(dāng)前對(duì)象的this存為一個(gè)變量，定時(shí)器內(nèi)的函數(shù)利用閉包來(lái)訪問(wèn)這個(gè)變量

如下：

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

這種方法是將當(dāng)前對(duì)象的引用放在一個(gè)變量里，定時(shí)器內(nèi)部的函數(shù)來(lái)訪問(wèn)到這個(gè)變量，自然就可以得到當(dāng)前的對(duì)象。

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綁定到這個(gè)函數(shù)上
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的為obj.num，值為1
obj.getNumLater()//1　　打印的為obj.num，值為1

bind()方法是在Function.prototype上的一個(gè)方法，當(dāng)被綁定函數(shù)執(zhí)行時(shí)，bind方法會(huì)創(chuàng)建一個(gè)新函數(shù)，并將第一個(gè)參數(shù)作為新函數(shù)運(yùn)行時(shí)的this。在這個(gè)例子中，在調(diào)用setTimeout中的函數(shù)時(shí)，bind方法創(chuàng)建了一個(gè)新的函數(shù)，并將this傳進(jìn)新的函數(shù)，執(zhí)行的結(jié)果也就是正確的了。關(guān)于bind方法可參考 MDN bind

以上兩種方法都是比較常用的，當(dāng)然如果使用call或apply方法來(lái)代替bind方法，得到的結(jié)果也是正確的，但是call方法會(huì)在調(diào)用之后立即執(zhí)行，那樣也就沒(méi)有了延時(shí)的效果，定時(shí)器也就沒(méi)有用了，所以推薦使用上述兩種方法來(lái)將this傳進(jìn)setTimeout和setInterval中。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: