闭包就是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。
自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。如:
function wrapper() { var freeVar = 42; function inner() { return 2 * freeVar; } return inner; }
其中freeVar就是自由变量。
自由变量在闭包生成之前,并不是函数的一部分。在函数被调用时,闭包才会形成,函数将这个自由变量纳入自己的作用域,自由变量从此与定义它的容器无关。
来看一个困惑例子:
<button>第1条记录</button> <button>第2条记录</button> <button>第3条记录</button> <button>第4条记录</button> <button>第5条记录</button> <button>第6条记录</button> <script type="text/javascript"> var buttonst_obj = document.getElementsByTagName("button"); for (var i = 0, len = buttonst_obj.length; i < len; i++) { buttonst_obj[i].onclick = function() { alert(i); }; } </script>
每个Button弹出的都是6,因为没有形成有效的闭包,因为闭包是有延迟求值特性的,所以在函数得到执行时,i==6。
如果将它改成这样,i 做为外层函数的参数而被内层函数闭包,结果就会是我们想要的:
var buttonst_obj = document.getElementsByTagName("button"); for (var i = 0, len = buttonst_obj.length; i < len; i++) { buttonst_obj[i].onclick = clickEvent(i); } function clickEvent(i){ return function () { console.log(i); } }
因为这个clickEvent(i)
高阶函数,它将 i 作为自由变量(注意:i 并不是内函数的参数,也不是内函数的一部分)传递,在 click 时闭包已经形成并被传递。
其中,高阶函数满足:要么接受一个或多个函数作为输入;要么输出一个函数