Javascript事件綁定的一個坑

JS支持在函數內定義函數,內部函數可以訪問外部函數的局部變量,但訪問時機的不同,會導致結果的不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
  <script type="application/javascript">
$(document).ready(function () {
  var level = 0;
  for (var i = 0; i < $("#tab").children.length; i++){
    if (level == 0){
      $("#row" + i).on("click", function () {
        $(this).children().eq(0).text("" + i);
      });
    }else if (level == 1){
      $("#row"+i).on("click", i, function (event) {
        $(this).children().eq(0).text(""+event.data);
      });
    }
  }
});
  </script>
</head>
<body>
<table id="tab">
  <tr id="row0"><td>row0</td></tr>
  <tr id="row1"><td>row1</td></tr>
</table>
</body>
</html>

鼠標點擊表格前,頁面是這樣的
初始
level==0 時,內部函數定義沒有綁定i的值,執行時從閉包獲取i爲2
level==0
level==1時,內部函數定義時綁定了i的值,執行時不從閉包獲取值
level==1
JavaScript的函數是第一類對象,所以函數的定義也是可以在運行時進行的,這就造成函數的定義和函數的運行很可能在時間上有間隔,定義時閉包等上下文信息在執行時可能已發生變化。
另外,大家可以看看這篇文章的典型誤區一節,可以加深理解

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章