setTimeOut與setInterval中的this的差別

本文轉載自http://www.jb51.net/article/30858.htm

在Javascript裡，setTimeout和setInterval接收第一個參數是一個字串或者一個函數，當在一個對象裡面用setTimeout延時調用該對象的方法時 

複製代碼代碼如下:

function obj() { 

this.fn = function() { 

alert("ok"); 

console.log(this); 

setTimeout(this.fn, 1000);//直接使用this引用當前對象 

} 

} 

var o = new obj(); 

o.fn(); 

然後我們發現上面的代碼不是想要的結果，原因是setTimeout裡面的this是指向window，所以要調用的函數變成 window.fn 為undefined，於是悲劇了。所以問題的關鍵在於得到當前對象的引用，於是有以下三種方法 
複製代碼代碼如下:

// 方法一： 


function obj() { 

this.fn = function() { 

alert("ok"); 

console.log(this); 

setTimeout(this.fn.bind(this), 1000);//通過Function.prototype.bind 綁定當前對象 

} 

} 

var o = new obj(); 

o.fn(); 

這樣可以得到正確的結果，可惜Function.prototype.bind方法是ES5新增的標準，測試了IE系列發現IE6-8都不支援，只有IE9+可以使用。要想相容就得簡單的類比下bind，看下面的代碼 
複製代碼代碼如下:

// 方法二： 

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(); 

首先通過一個自執行匿名函數傳當前對象和對象方法進去，也就是裡面的參數a和b，再返回一個閉包，通過call方法使this指向正確。下面是比較簡潔的方法 
複製代碼代碼如下:

// 方法三： 

function obj() { 

this.fn = function() { 

var that = this;//儲存當前對象this 

alert("ok"); 

setTimeout(function(){ 

that.fn(); 

}, 1000);//通過閉包得到當前範圍，好訪問儲存好的對象that 

} 

} 

var o = new obj(); 

o.fn(); 

上面第三個方法的兩個關鍵點是 儲存當前對象this為別名that 和 通過閉包得到當前範圍，以訪問儲存好的對象that;當對象方法裡面多層嵌套函數或者setTimeout,setInterval等方法丟失this（也就是this不指向當前對象而是window）,所以在this指向正確的範圍儲存var
that = this就變得很實用了