Javascript對象中關(guān)于setTimeout和setInterval的this介紹
更新時間:2012年07月21日 09:32:00 作者:
Javascript對象中關(guān)于setTimeout和setInterval的this介紹,需要的朋友可以參考下
在Javascript里,setTimeout和setInterval接收第一個參數(shù)是一個字符串或者一個函數(shù),當(dāng)在一個對象里面用setTimeout延時調(diào)用該對象的方法時
function obj() {
this.fn = function() {
alert("ok");
console.log(this);
setTimeout(this.fn, 1000);//直接使用this引用當(dāng)前對象
}
}
var o = new obj();
o.fn();
然后我們發(fā)現(xiàn)上面的代碼不是想要的結(jié)果,原因是setTimeout里面的this是指向window,所以要調(diào)用的函數(shù)變成 window.fn 為undefined,于是悲劇了。所以問題的關(guān)鍵在于得到當(dāng)前對象的引用,于是有以下三種方法
// 方法一:
function obj() {
this.fn = function() {
alert("ok");
console.log(this);
setTimeout(this.fn.bind(this), 1000);//通過Function.prototype.bind 綁定當(dāng)前對象
}
}
var o = new obj();
o.fn();
這樣可以得到正確的結(jié)果,可惜Function.prototype.bind方法是ES5新增的標(biāo)準(zhǔn),測試了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ù)傳當(dāng)前對象和對象方法進(jìn)去,也就是里面的參數(shù)a和b,再返回一個閉包,通過call方法使this指向正確。下面是比較簡潔的方法
// 方法三:
function obj() {
this.fn = function() {
var that = this;//保存當(dāng)前對象this
alert("ok");
setTimeout(function(){
that.fn();
}, 1000);//通過閉包得到當(dāng)前作用域,好訪問保存好的對象that
}
}
var o = new obj();
o.fn();
上面第三個方法的兩個關(guān)鍵點是 保存當(dāng)前對象this為別名that 和 通過閉包得到當(dāng)前作用域,以訪問保存好的對象that;當(dāng)對象方法里面多層嵌套函數(shù)或者setTimeout,setInterval等方法丟失this(也就是this不指向當(dāng)前對象而是window),所以在this指向正確的作用域保存var that = this就變得很實用了
復(fù)制代碼 代碼如下:
function obj() {
this.fn = function() {
alert("ok");
console.log(this);
setTimeout(this.fn, 1000);//直接使用this引用當(dāng)前對象
}
}
var o = new obj();
o.fn();
然后我們發(fā)現(xiàn)上面的代碼不是想要的結(jié)果,原因是setTimeout里面的this是指向window,所以要調(diào)用的函數(shù)變成 window.fn 為undefined,于是悲劇了。所以問題的關(guān)鍵在于得到當(dāng)前對象的引用,于是有以下三種方法
復(fù)制代碼 代碼如下:
// 方法一:
function obj() {
this.fn = function() {
alert("ok");
console.log(this);
setTimeout(this.fn.bind(this), 1000);//通過Function.prototype.bind 綁定當(dāng)前對象
}
}
var o = new obj();
o.fn();
這樣可以得到正確的結(jié)果,可惜Function.prototype.bind方法是ES5新增的標(biāo)準(zhǔn),測試了IE系列發(fā)現(xiàn)IE6-8都不支持,只有IE9+可以使用。要想兼容就得簡單的模擬下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();
首先通過一個自執(zhí)行匿名函數(shù)傳當(dāng)前對象和對象方法進(jìn)去,也就是里面的參數(shù)a和b,再返回一個閉包,通過call方法使this指向正確。下面是比較簡潔的方法
復(fù)制代碼 代碼如下:
// 方法三:
function obj() {
this.fn = function() {
var that = this;//保存當(dāng)前對象this
alert("ok");
setTimeout(function(){
that.fn();
}, 1000);//通過閉包得到當(dāng)前作用域,好訪問保存好的對象that
}
}
var o = new obj();
o.fn();
上面第三個方法的兩個關(guān)鍵點是 保存當(dāng)前對象this為別名that 和 通過閉包得到當(dāng)前作用域,以訪問保存好的對象that;當(dāng)對象方法里面多層嵌套函數(shù)或者setTimeout,setInterval等方法丟失this(也就是this不指向當(dāng)前對象而是window),所以在this指向正確的作用域保存var that = this就變得很實用了
您可能感興趣的文章:
- JavaScript SetInterval與setTimeout使用方法詳解
- JavaScript中SetInterval與setTimeout的用法詳解
- Js中setTimeout()和setInterval() 何時被調(diào)用執(zhí)行的用法
- JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法
- javascript中SetInterval與setTimeout的定時器用法
- JavaScript定時器setTimeout()和setInterval()詳解
- js中的setInterval和setTimeout使用實例
- JavaScript中setTimeout和setInterval函數(shù)的傳參及調(diào)用
- JavaScript setTimeout和setInterval的使用方法 說明
- JavaScript?setTimeout和setInterval的用法與區(qū)別詳解
相關(guān)文章
JS函數(shù)驗證總結(jié)(方便js客戶端輸入驗證)
JS函數(shù)驗證總結(jié),都是一些基礎(chǔ)的東西,現(xiàn)在比較流行jquery了,不過這些東西仍然需要大家會。2010-10-10JavaScript計時器用法分析【setTimeout和clearTimeout】
這篇文章主要介紹了JavaScript計時器用法,結(jié)合實例形式分析了setTimeout和clearTimeout函數(shù)的具體使用技巧,需要的朋友可以參考下2017-01-01JavaScript實現(xiàn)元素滾動條到達(dá)一定位置循環(huán)追加內(nèi)容
下面小編就為大家分享一篇JavaScript實現(xiàn)元素滾動條到達(dá)一定位置循環(huán)追加內(nèi)容,具有很好的參考價值,希望對大家有所幫助2017-12-12