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==1時,內部函數定義時綁定了i的值,執行時不從閉包獲取值
JavaScript的函數是第一類對象,所以函數的定義也是可以在運行時進行的,這就造成函數的定義和函數的運行很可能在時間上有間隔,定義時閉包等上下文信息在執行時可能已發生變化。
另外,大家可以看看這篇文章的典型誤區一節,可以加深理解