简析Javascript变量作用域链
Javascript语言与服务端编程语言有一些不同,比如事件驱动、函数内定义新函数、函数即类、作用域链等等,这些特性促使这门语言相当奇葩。这一小节就来看看这个作用域链。
彻底搞明白作用域链原理,可以让你的程序少一些bug,也会节省一些开发调试时间。下面开始一段简单的代码:
<html>
<head></head>
<body>
<input id="test" type="text" />
</body>
<script>
function $(id) {
return document.getElementById(id);
}
function fun1() {
var a= 1;
function inner() {
a++;
alert(a);
}
$("test").onclick = inner;
}
fun1();
</script>
</html>
这是一个非常容易读懂的事件绑定代码,先推测一下每次点击 input 会提示什么内容,然后拿这代码亲自执行一遍,看看你的推测对不对。如果是对,非常恭喜你,如果不对,那就接着往下看吧。
函数 inner 中的 a 没有使用 var 定义,所以执行时会使用当前函数外层的作用域,逐层向外查找,此时发现有定义 var a= 1,就停止查找,此时变量 a 的作用域就是fun1函数内部。此时变量 a 虽然在 函数 fun1 中,但是不会被垃圾回收机制回收掉,这是为什么,请关注 Javascript 变量生命周期。
相关概念:
函数运行在其定义的作用域,而不是执行的作用域。这个与作用域链是一个意思,只是表达方式不同。
