閉包程式碼例項演示

admin發表於2017-04-16

分享一段程式碼例項，它演示了閉包的使用。

閉包本質上還是作用域和作用域鏈的問題，一個變數的作用域在其宣告的時候就已經確定，不會因為使用場所的不同而不同。

其實閉包這個概念完全可以不用出現，只要充分理解了作用域和作用域鏈就可以了，出現"閉包"這個稱謂反而加深了理解難度。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  var elements = document.getElementsByTagName('li');
  var length = elements.length;
  for (var index = 0; index < length; index++) {
    elements[index].onclick = function (num) {
      return function () {
        alert(num);
      };
    }(index);
  }
}
</script>
</head>
<body>
  <ul>
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
  </ul>
</body>
</html>

在上面的程式碼中，事件處理函式是是匿名函式的返回值（這個返回值是一個函式）。

這個匿名函式的引數是num（引數本質上就是在函式內宣告一個變數，為其傳遞引數，就是為這個變數賦值），傳遞index就相當於在函式內宣告一個變數num並賦值為index。匿名函式內部的匿名函式function () {alert(num);}是可以訪問到變數num，即便是此函式被返回充當事件處理函式，也是可以訪問變數num（變數的作用域是生命時候就確定的），其實閉包就是這麼回事。

相關文章