從 setTimeout 徹底理解閉包

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

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

先看一個常見的例子
setTimeout 閉包代碼

//代碼段（1）

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

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

疑問：如果把bind改成call將會是什么效果呢？

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

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

輸出：一次性全部打印遞增i，并未達到計時器效果。

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

 //代碼段（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í)行腫么辦捏？很簡單，內(nèi)部再加個function作為返回值

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96058.html

JavaScript之例題中徹底理解this

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

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

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

Mr_houzi 2019-08-26 13:33 評論0 收藏0
前端基礎

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

graf 2019-08-21 18:38 評論0 收藏0
初學者徹底理解javascript閉包以及this關鍵字

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

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

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

elisa.yang 2019-08-21 15:13 評論0 收藏0