最近在一些技术群里还总是能够看到有人问闭包到底是个什么东西,网上有大量的文章都在阐述着闭包的定义用法,可还是没能让人都明白什么是闭包。今天我也来试着解释一下闭包。
闭包的定义 借用阮一峰老师的话“闭包”就是能够读取其他函数内部变量的函数。
闭包的作用 JavaScript闭包可以用在许多地方。它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
ok,言归正传。 先来看一个简单的闭包的例子
function fun(x) { var count = 2; return function (y) { alert(x + y + (++count)); } } var foo = fun(2); // foo 现在就是一个闭包 foo(10); //15上面的脚本最终会alert 15,foo在定义的时候就将fun内的x值为2,在调用foo的时候count相对foo就是一个外部变量,foo(10)最终执行的可以理解为:
//x = 2;y=10;count=2; function(10){ alert(2 + 10 + (++2)); }由于执行foo的时候改变了count的值,所以再次执行foo的时候count就等于3了。 还有一个经典的闭包
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> </head> <body> <button>0</button> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <script type="text/javascript"> var Arr = document.getElementsByTagName("button"); for( var i=0; i<Arr.length; i++ ) { Arr[i].onclick = function() { alert(i); } } </script> </body> </html>当点击按钮的时候为什么不会对应输出01234而是全部都输出5呢?这个脚本执行的时候应该为:
Arr[0].onclick = function(){ alert(i); } Arr[1].onclick = function(){ alert(i); } …… Arr[4].onclick = function(){ alert(i); } i=5;当i=5时,for循环停止,所以最终打印出来的都是5。 解决办法:
<script type="text/javascript"> var Arr = document.getElementsByTagName("button"); for( var i=0; i<Arr.length; i++ ) { (function(arg) Arr[i].onclick = function() { alert(arg); } )(i) } </script>希望对大家理解闭包有所帮助,说的不对的地方请轻喷。