闭包代码实例演示

快乐打工仔 分类:实例代码

分享一段代码实例,它演示了闭包的使用。

闭包本质上还是作用域和作用域链的问题,一个变量的作用域在其声明的时候就已经确定,不会因为使用场所的不同而不同。

其实闭包这个概念完全可以不用出现,只要充分理解了作用域和作用域链就可以了,出现"闭包"这个称谓反而加深了理解难度。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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(变量的作用域是生命时候就确定的),其实闭包就是这么回事。

闭包代码实例演示,这样的场景在实际项目中还是用的比较多的,关于闭包代码实例演示就介绍到这了。

闭包代码实例演示属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容