立即執行函數 與 閉包


曖昧關系?
立即執行函數能配合閉包保存狀態。

像普通的函數傳參一樣,立即執行函數也能傳參數。如果在函數內部再定義一個函數,而里面的那個函數能引用外部的變量和參數(閉包),利用這一點,我們能使用立即執行函數鎖住變量保存狀態。

javascript立即執行函數表達式(IIFE)

// 並不會像你想象那樣的執行,因為i的值沒有被鎖住
// 當我們點擊鏈接的時候,其實for循環已經執行完了
// 於是在點擊的時候i的值其實已經是elems.length了
var elems = document.getElementsByTagName( 'a' );
 
for ( var i = 0; i < elems.length; i++ ) {
 
  elems[ i ].addEventListener( 'click', function(e){
    e.preventDefault();
    alert( 'I am link #' + i );
  }, 'false' );
 
}
 
// 這次我們得到了想要的結果
// 因為在立即執行函數內部,i的值傳給了lockedIndex,並且被鎖在內存中
// 盡管for循環結束后i的值已經改變,但是立即執行函數內部lockedIndex的值並不會改變
var elems = document.getElementsByTagName( 'a' );
 
for ( var i = 0; i < elems.length; i++ ) {
 
  (function( lockedInIndex ){
 
    elems[ i ].addEventListener( 'click', function(e){
      e.preventDefault();
      alert( 'I am link #' + lockedInIndex );
    }, 'false' );
 
  })( i );
 
}
 
// 你也可以這樣,但是毫無疑問上面的代碼更具有可讀性
var elems = document.getElementsByTagName( 'a' );
 
for ( var i = 0; i < elems.length; i++ ) {
 
  elems[ i ].addEventListener( 'click', (function( lockedInIndex ){
    return function(e){
      e.preventDefault();
      alert( 'I am link #' + lockedInIndex );
    };
  })( i ), 'false' );
 
}

==2017/2/28==


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com