作用域
全局作用域
局部作用域
作用域链
执行上下文
活动对象
闭包
闭包优化
JavaScript中出现了一个以前没学过的概念——闭包。何为闭包?从表面理解即封闭的包,与作用域有关。所以,说闭包以前先说说作用域。
作用域(scope)
通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突。
全局作用域(Global Scope)
在代码中任何地方都能访问到的对象拥有全局作用域,以下几种情形拥有全局作用域:
1、最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:
[url=#]<a id="anchor2" href="#">anchor2</a><br/>
<a id="anchor3" href="#">anchor3</a><br/>
</body>
运行结果:无论点击那个anchor,总会弹出anchor4,而我们根本就没有anchor4:
[img]http://files.jb51.net/upload/201206/20120630003612291.jpg[/img]
当我们加载页面时,javascript中的newLoad函数已经运行完毕,由其中的循环可知,anchor已经赋值为4。但是由以前的编程经验来看,局部变量使用完毕就会销毁,但是anchor却没有,显然这里 JavaScript 采用了另外的方式。
闭包在 JavaScript 其实就是一个函数,在函数运行期被创建的,当上面的 函数被执行的时候,会创建一个闭包,而这个闭包会引用newLoad 作用域中的anchor。下面就来看看 JavaScript 是如何来实现闭包的:当执行 newLoad 函数的时候, JavaScript 引擎会创建newLoad函数执行上下文的作用域链,这个作用域链包含了 newLoad执行时的活动对象,同时 JavaScript 引擎也会创建一个闭包,而闭包的作用域链也会引用 newload的活动对象,这样当 newload执行完的时候,虽然其执行上下文和活动对象都已经释放了anchor,但是闭包还是引用着 newload 的活动对象,所以点击显示的是“you clicked anchor4”。运行期如图:
[img]http://files.jb51.net/upload/201206/20120630003612399.jpg[/img]
[b]闭包优化[/b]
既然闭包出现了我们不想看到的结果,我们需要优化它。优化后的javascript(其他不变):
<script type="text/javascript">
function newLoad() { //新建页面加载的事件
for (var i = 1; i <= 3; i++) {
var anchor = document.getElementById("anchor" + i); //找到每个anchor
listener(anchor,i);//listener函数
}
}
function listener(anchor, i) {
anchor.onclick = function () {//为anchor添加单击事件
alert("you clicked anchor" + i); //给出点击反应
}
}
window.onload = newLoad; //把newload事件赋值给页面加载
</script>
运行结果:提示对应的提示信息
[img]http://files.jb51.net/upload/201206/20120630003612458.jpg[/img]
结果分析:优化后的结果是因为,我们把声明的变量和单击事件相分离。用以上解释的作用域链解释:页面加载,先执行listener函数,而listener函数需要anchor变量,在listener函数作用域链中没有,会进入下一级作用域链,即查找newLoad中的anchor,因为在listener中已经确定了哪个anchor单击对应哪个提示信息,所以只是在newload中查找对应的anchor而已,不会等循环完毕产生anchor4。
因为接触javascript时间尚短,理解有误的地方欢迎指正。