Javascript對象中關于setTimeout和setInterval的this介紹

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

Javascript對象中關于setTimeout和setInterval的this介紹，需要的朋友可以參考下

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

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

然后我們發(fā)現(xiàn)上面的代碼不是想要的結果，原因是setTimeout里面的this是指向window，所以要調用的函數(shù)變成 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系列發(fā)現(xiàn)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(); 

首先通過一個自執(zhí)行匿名函數(shù)傳當前對象和對象方法進去，也就是里面的參數(shù)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;當對象方法里面多層嵌套函數(shù)或者setTimeout,setInterval等方法丟失this（也就是this不指向當前對象而是window）,所以在this指向正確的作用域保存var that = this就變得很實用了

您可能感興趣的文章:

8個JavaScript條件語句優(yōu)化小技巧分享
在日常的開發(fā)中，我們經常會編寫一些條件語句，過多的?if...else會導致代碼難以理解和維護，今天小編來分享幾個優(yōu)化條件語句的小技巧，希望對大家有所幫助
2022-07-07
WordPress 插件——CoolCode使用方法與下載
本插件原修改自 Chroder.com 的 WordPress Code Highlight 插件。但 CoolCode 插件在它基礎上修改了很多的內容。
2007-07-07
javascript清空table表格的方法
這篇文章主要介紹了javascript清空table表格的方法,涉及javascript操作table表格的技巧,需要的朋友可以參考下
2015-05-05
JS原型和原型鏈原理與用法實例詳解
這篇文章主要介紹了JS原型和原型鏈原理與用法,結合實例形式詳細分析了js原型和原型鏈概念、原理、使用方法及相關操作注意事項,需要的朋友可以參考下
2020-02-02
uni-app中實現(xiàn)元素拖動效果
這篇文章主要介紹了uni-app中實現(xiàn)元素拖動效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-01-01
基于JavaScript實現(xiàn)全屏透明遮罩div層鎖屏效果
這篇文章主要介紹了基于JavaScript實現(xiàn)全屏透明遮罩div層鎖屏效果的相關資料,需要的朋友可以參考下
2016-01-01
JS常見簡單正則表達式驗證功能小結【手機,地址,企業(yè)稅號,金額,身份證等】
這篇文章主要介紹了JS常見簡單正則表達式驗證功能,結合實例形式總結分析了JS針對手機,地址,企業(yè)稅號,金額,身份證等的常見驗證技巧,需要的朋友可以參考下
2017-01-01
Javascript基礎知識盲點總結之函數(shù)
函數(shù)是由事件驅動的或者當它被調用時執(zhí)行的可重復使用的代碼塊。這篇文章主要介紹了Javascript基礎知識盲點總結之函數(shù)的相關資料
2016-05-05
javascript通過className來獲取元素的簡單示例代碼
本篇文章主要是對javascript通過className來獲取元素的簡單示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
echarts中X軸顯示特定個數(shù)label并修改樣式的方法詳解
最近在使用Echarts圖表遇到些特別的需求,想著給大家整理下,所以下面這篇文章主要給大家介紹了關于echarts中X軸顯示特定個數(shù)label并修改樣式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07