浅谈对闭包的理解

时间:2021-01-27 22:43:27

1、举个闭包的例子。(一定要将例子看完)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
</head>
<body>
<input id="text">
<input type="button" id="submit" value="运行一次"/>
<script>
//闭包案例
function outer() {
var n = 0;
return function inner() {
return ++n;
}
}
var con = outer(); //显示n的值
submit.onclick = function () {
text.value = con();
}
</script>
</body>
</html>

每次触发onclick事件,input的value值都会加一,模拟了计数器的效果。

2、闭包的理解
引擎编译方法每一行代码的时候,都会生成一个Scope,在没有闭包的情况下,当函数进入Call Stack,会当前块作用域中的属性和方法放在Scope中,编译结束后,该函数的Scope就被引擎的回收机制回收。如果函数进入Call Stack,调用了不是本函数Scope里的属性或方法,而是将属性和方法指向了其他函数Scope中的地址,这就形成了闭包,闭包会阻止引擎回收机制,使得该作用域不被回收,也破坏了作用域链。所以上面一个例子,显示了计数器的效果。

3、用chrome的check模拟闭包运行的过程
a、在outer对象的n属性和inner方法和inner方法内的n上,打三个断点。
浅谈对闭包的理解
b、第一次编译,没有触发click事件,outer方法的Scope中没有出现闭包。
浅谈对闭包的理解
c、触发click事件,inner方法进栈,Scope中出现了outer方法的Closure。
浅谈对闭包的理解
从上面的debug的过程中发现,当调用函数的作用域占用其他作用域中的变量的地址后,第一次创建了Closure 。