從 setTimeout 徹底理解閉包

jsyzchen 發(fā)布于2019-08-22 18:39 / 3146人閱讀

摘要：先看一個(gè)常見(jiàn)的例子閉包代碼代碼段輸出打印為每間隔依次遞增打印。原理解釋，函數(shù)，作用為更改指向，其余為預(yù)設(shè)值。區(qū)別函數(shù)并不會(huì)立即執(zhí)行，而函數(shù)會(huì)立即執(zhí)行。

先看一個(gè)常見(jiàn)的例子
setTimeout 閉包代碼

//代碼段（1）

for(var i=0;i<5;i++){
    setTimeout(console.log.bind(null,i),i*1000);
}

輸出：打印為每間隔1s依次遞增打印i。

疑問(wèn)：如果把bind改成call將會(huì)是什么效果呢？

 //代碼段（2）內(nèi)部打印函數(shù)立即自執(zhí)行

for(var i=0;i<5;i++){
    setTimeout(console.log.call(null,i),i*1000);
}

輸出：一次性全部打印遞增i，并未達(dá)到計(jì)時(shí)器效果。

原理解釋：
bind（arg1,arg2,arg3...），call(arg1,arg2,arg3...)函數(shù)，arg1作用為更改this指向，其余arguments為預(yù)設(shè)值。
區(qū)別： bind函數(shù)并不會(huì)立即執(zhí)行，而call函數(shù)會(huì)立即執(zhí)行。這就是為什么call函數(shù)會(huì)一次性打印的原因。

 //代碼段（3）
 //代碼段 （3） == 代碼段（1）
for(var i=0;i<5;i++){
    setTimeout(function(index){
      console.log(index);
    }.bind(null,i),i*1000);
}

//代碼段 （4）內(nèi)部打印函數(shù)立即自執(zhí)行
//代碼段 （4）== 代碼段（2）
for(var i=0;i<5;i++){
    setTimeout((function(index){
      console.log(index);
    }.bind(null,i))(i),i*1000);
}

如果想用call函數(shù)，但是阻止自執(zhí)行腫么辦捏？很簡(jiǎn)單，內(nèi)部再加個(gè)function作為返回值

for(var i=0;i<10;i++){
    setTimeout(function(index){
      return function(){ 
        console.log(index); 
      }
    }.call(null,i),i*1000);
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96058.html

相關(guān)文章

JavaScript之例題中徹底理解this

摘要：最后重點(diǎn)理解結(jié)論箭頭函數(shù)的，總是指向定義時(shí)所在的對(duì)象，而不是運(yùn)行時(shí)所在的對(duì)象。輸出，箭頭函數(shù)不會(huì)綁定所以傳入指向無(wú)效。原因是，要徹底理解應(yīng)該是建立在已經(jīng)大致理解了中的執(zhí)行上下文，作用域作用域鏈，閉包，變量對(duì)象，函數(shù)執(zhí)行過(guò)程的基礎(chǔ)上。本文共 2025 字，看完只需 8 分鐘概述前面的文章講解了 JavaScript 中的執(zhí)行上下文，作用域，變量對(duì)象，this 的相關(guān)原理，但是我...

Hwg 2019-08-23 12:34 評(píng)論0 收藏0
徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。原博客地址，歡迎star 函數(shù)防抖和節(jié)流函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評(píng)論0 收藏0
前端基礎(chǔ)

摘要：談起閉包，它可是兩個(gè)核心技術(shù)之一異步基于打造前端持續(xù)集成開(kāi)發(fā)環(huán)境本文將以一個(gè)標(biāo)準(zhǔn)的項(xiàng)目為例，完全拋棄傳統(tǒng)的前端項(xiàng)目開(kāi)發(fā)部署方式，基于容器技術(shù)打造一個(gè)精簡(jiǎn)的前端持續(xù)集成的開(kāi)發(fā)環(huán)境。這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老鳥(niǎo)，不論是面試求職，還是日...

graf 2019-08-21 18:38 評(píng)論0 收藏0
初學(xué)者徹底理解javascript閉包以及this關(guān)鍵字

摘要：理解了這句話，我們就可以來(lái)看閉包了閉包前面說(shuō)過(guò)，函數(shù)可以訪問(wèn)函數(shù)作用域鏈中的變量，但如果我們想在函數(shù)外訪問(wèn)函數(shù)內(nèi)卻不行了。不管是閉包還是this關(guān)鍵字，都是困擾JS初學(xué)者的比較難懂的東西，如果你對(duì)它們的認(rèn)識(shí)還不足夠清晰，那么現(xiàn)在就一起把它們掌握掉。還是那句話，我們從最基本的開(kāi)始，建立起一個(gè)非常清晰的知識(shí)結(jié)構(gòu)，好了，開(kāi)始吧 ? 閉包當(dāng)然我們今天說(shuō)的是javascript里的閉包。要學(xué)...

魏明 2019-08-21 16:23 評(píng)論0 收藏0
先有蛋還是先有雞？JavaScript 作用域與閉包探析

摘要：而閉包的神奇之處正是可以阻止事情的發(fā)生。拜所聲明的位置所賜，它擁有涵蓋內(nèi)部作用域的閉包，使得該作用域能夠一直存活，以供在之后任何時(shí)間進(jìn)行引用。依然持有對(duì)該作用域的引用，而這個(gè)引用就叫閉包。引子先看一個(gè)問(wèn)題，下面兩個(gè)代碼片段會(huì)輸出什么？ // Snippet 1 a = 2; var a; console.log(a); // Snippet 2 console.log(a); v...

elisa.yang 2019-08-21 15:13 評(píng)論0 收藏0