快捷導(dǎo)航

Javascript對(duì)象中關(guān)于setTimeout和setInterval的this介紹

更新時(shí)間：2012年07月21日 09:32:00 作者：

Javascript對(duì)象中關(guān)于setTimeout和setInterval的this介紹，需要的朋友可以參考下

在Javascript里，setTimeout和setInterval接收第一個(gè)參數(shù)是一個(gè)字符串或者一個(gè)函數(shù)，當(dāng)在一個(gè)對(duì)象里面用setTimeout延時(shí)調(diào)用該對(duì)象的方法時(shí)

復(fù)制代碼代碼如下:

 
function obj() { 
this.fn = function() { 
alert("ok"); 
console.log(this); 
setTimeout(this.fn, 1000);//直接使用this引用當(dāng)前對(duì)象 
} 
} 
var o = new obj(); 
o.fn(); 

然后我們發(fā)現(xiàn)上面的代碼不是想要的結(jié)果，原因是setTimeout里面的this是指向window，所以要調(diào)用的函數(shù)變成 window.fn 為undefined，于是悲劇了。所以問(wèn)題的關(guān)鍵在于得到當(dāng)前對(duì)象的引用，于是有以下三種方法

復(fù)制代碼代碼如下:

 
// 方法一： 

function obj() { 
this.fn = function() { 
alert("ok"); 
console.log(this); 
setTimeout(this.fn.bind(this), 1000);//通過(guò)Function.prototype.bind 綁定當(dāng)前對(duì)象 
} 
} 
var o = new obj(); 
o.fn(); 

這樣可以得到正確的結(jié)果，可惜Function.prototype.bind方法是ES5新增的標(biāo)準(zhǔn)，測(cè)試了IE系列發(fā)現(xiàn)IE6-8都不支持，只有IE9+可以使用。要想兼容就得簡(jiǎn)單的模擬下bind，看下面的代碼

復(fù)制代碼代碼如下:

 
// 方法二： 
function obj() { 
this.fn = function() { 
alert("ok"); 
setTimeout((function(a,b){ 
return function(){ 
b.call(a); 
} 
})(this,this.fn), 1000);//模擬Function.prototype.bind 
} 
} 
var o = new obj(); 
o.fn(); 

首先通過(guò)一個(gè)自執(zhí)行匿名函數(shù)傳當(dāng)前對(duì)象和對(duì)象方法進(jìn)去，也就是里面的參數(shù)a和b，再返回一個(gè)閉包，通過(guò)call方法使this指向正確。下面是比較簡(jiǎn)潔的方法

復(fù)制代碼代碼如下:

 
// 方法三： 
function obj() { 
this.fn = function() { 
var that = this;//保存當(dāng)前對(duì)象this 
alert("ok"); 
setTimeout(function(){ 
that.fn(); 
}, 1000);//通過(guò)閉包得到當(dāng)前作用域，好訪問(wèn)保存好的對(duì)象that 
} 
} 
var o = new obj(); 
o.fn(); 

上面第三個(gè)方法的兩個(gè)關(guān)鍵點(diǎn)是保存當(dāng)前對(duì)象this為別名that 和通過(guò)閉包得到當(dāng)前作用域，以訪問(wèn)保存好的對(duì)象that;當(dāng)對(duì)象方法里面多層嵌套函數(shù)或者setTimeout,setInterval等方法丟失this（也就是this不指向當(dāng)前對(duì)象而是window）,所以在this指向正確的作用域保存var that = this就變得很實(shí)用了

您可能感興趣的文章: