欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)用了

相關(guān)文章

  • JS中多層次排序算法的實(shí)現(xiàn)代碼

    JS中多層次排序算法的實(shí)現(xiàn)代碼

    這篇文章主要給大家介紹了關(guān)于JS中多層次排序算法的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • JS函數(shù)驗(yàn)證總結(jié)(方便js客戶端輸入驗(yàn)證)

    JS函數(shù)驗(yàn)證總結(jié)(方便js客戶端輸入驗(yàn)證)

    JS函數(shù)驗(yàn)證總結(jié),都是一些基礎(chǔ)的東西,現(xiàn)在比較流行jquery了,不過(guò)這些東西仍然需要大家會(huì)。
    2010-10-10
  • Javascript 繼承機(jī)制實(shí)例

    Javascript 繼承機(jī)制實(shí)例

    說(shuō)明繼承機(jī)制最簡(jiǎn)單的方法是,利用一個(gè)經(jīng)典的例子——幾何形狀。
    2009-08-08
  • JavaScript刪除字符串中指定字符的4種方法匯總

    JavaScript刪除字符串中指定字符的4種方法匯總

    在前端面試中,經(jīng)常會(huì)問(wèn)到這樣的一個(gè)問(wèn)題,刪除字符串中指定字符,下面這篇文章主要給大家介紹了關(guān)于JavaScript刪除字符串中指定字符的4種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】

    JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】

    這篇文章主要介紹了JavaScript計(jì)時(shí)器用法,結(jié)合實(shí)例形式分析了setTimeout和clearTimeout函數(shù)的具體使用技巧,需要的朋友可以參考下
    2017-01-01
  • 淺談document.write()輸出樣式

    淺談document.write()輸出樣式

    這篇文章主要介紹了淺談document.write()輸出樣式,十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。
    2015-05-05
  • JS進(jìn)階之從多線程到Event?Loop全面梳理

    JS進(jìn)階之從多線程到Event?Loop全面梳理

    JS是通過(guò)事件隊(duì)列(Event?Loop)的方式來(lái)實(shí)現(xiàn)異步回調(diào)的,但對(duì)很多初學(xué)JS的人來(lái)說(shuō),根本搞不清楚單線程的JS為什么擁有異步的能力,所以本文將從進(jìn)程、線程的角度來(lái)解釋這個(gè)問(wèn)題
    2023-05-05
  • JavaScript中跨標(biāo)簽頁(yè)通信的常見(jiàn)方式

    JavaScript中跨標(biāo)簽頁(yè)通信的常見(jiàn)方式

    跨標(biāo)簽頁(yè)通信是指在瀏覽器中的不同標(biāo)簽頁(yè)之間進(jìn)行數(shù)據(jù)傳遞和通信的過(guò)程,這篇文章為大家整理了幾個(gè)常見(jiàn)的跨標(biāo)簽頁(yè)通信方式,感興趣的小伙伴可以了解下
    2023-10-10
  • js實(shí)現(xiàn)一鍵換膚效果

    js實(shí)現(xiàn)一鍵換膚效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)一鍵換膚效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • JavaScript實(shí)現(xiàn)元素滾動(dòng)條到達(dá)一定位置循環(huán)追加內(nèi)容

    JavaScript實(shí)現(xiàn)元素滾動(dòng)條到達(dá)一定位置循環(huán)追加內(nèi)容

    下面小編就為大家分享一篇JavaScript實(shí)現(xiàn)元素滾動(dòng)條到達(dá)一定位置循環(huán)追加內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助
    2017-12-12

最新評(píng)論