简析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 变量生命周期。
相关概念:
函数运行在其定义的作用域,而不是执行的作用域。这个与作用域链是一个意思,只是表达方式不同。