闭包代码实例演示
分类:实例代码
分享一段代码实例,它演示了闭包的使用。
闭包本质上还是作用域和作用域链的问题,一个变量的作用域在其声明的时候就已经确定,不会因为使用场所的不同而不同。
其实闭包这个概念完全可以不用出现,只要充分理解了作用域和作用域链就可以了,出现"闭包"这个称谓反而加深了理解难度。
代码实例如下:
<!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(变量的作用域是生命时候就确定的),其实闭包就是这么回事。
闭包代码实例演示,这样的场景在实际项目中还是用的比较多的,关于闭包代码实例演示就介绍到这了。
闭包代码实例演示属于前端实例代码,有关更多实例代码大家可以查看。