JavaScript的作用域和作用域链。在初学JavaScript时,觉得它就和其他语言没啥区别,尤其是作用域这块,想当然的以为“全局变量就是在整个程序的任何地方都可以访问,也就是写在函数外的变量,局部变量也就是写在函数内部或循环体内部,出了循环体和函数就不可访问”,但是在JavaScript中并不是这么简单,需要去深入的学习。
一. 什么是作用域
任何程序语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围。比如C/C++等,都是块级作用域,也就是说在每一个代码块内声明的变量,出了这个代码块就是不可见的,而JS根本就没有块级作用域这个概念,而是函数作用域。如下面的例子:
1 2 3 4 5 6 7 8 9 10 |
|
上面的程序输出结果为2,知道c和c++或java的同学都会知道,在for循环体块中定义的变量,在循环体外部是不可访问的,可是在JS中,没有块作用域这个概念,只有函数作用域的概念,所以只要是在函数体内部定义的变量,在这个函数体内都是可访问的。
二. 函数作用域
看到上面的小例子,应该对函数作用域有一点模糊的理解吧。其实也就是说,变量和函数在声明它们的函数体中,和这个函数体嵌套的任意函数体内部都是可访问的。下面再看个小例子:
1 2 3 4 5 6 7 8 9 10 11 |
|
结果如代码后的注释,可见变量和函数只在当前运行函数体的内部有效,在当前运行函数体的外部是无效的。
三. 变量作用域
JS的变量计较特殊,下面是一些小例子,请看它的特殊点:
(1)全局变量被覆盖:
1 2 3 4 5 6 7 8 9 |
|
如上代码不知道JS变量作用域的肯定会觉得,第一个输出“huitaiyang”,第二个输出“xiyangyang”,其实不是的,第一个会输出“undefined”,第二个是“xiyangyang”(其实一开始我也是这么想的),无论如何请随时谨记,JS是函数作用域,也就是它首先会在函数内部寻找name属性,找不到才会继续往上一层寻找。
这个小例子中,在test函数内部有name的定义,也就是找到了,它不会在往上层寻找了,但是name在打印时并没有赋值,所以就输出了undefined,第二次打印时已经赋值,就是正常的“xiyangyang”。
(2)没有var声明的局部变量,上升为全局变量:
1 2 3 4 5 6 7 |
|
上面代码两次打印结果都是“xiyangyang”,所以没有var声明的变量都是全局变量,是window对象的属性,console.log(name); 这样和上面的结果一致。
四. 作用域链
一旦函数创建,函数的作用域就确定了,作用域链就由作用域中对象的集合组成。当函数执行时,它会把当前正在执行的函数内部的所有变量(包括this)置于作用域链的首部,会把该函数外部的对象置于第二,第三…层,window对象置于最外层。作用域链的层数和函数的层数有关。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
在上面的例子中,打印出来的结果是“langyangyang”和“xiyangyang”。
解析:当test()执行时,运行到show1,创建show1的执行环境,将show1的所有内部变量都置于作用域链的首部,然后将函数test的所有对象都置于show1的后面,最后是window对象,然后从作用域链的头部开始查找name属性,所以show1()的作用域链是:show1()->test()->window
,所以name就是lanyangyang;同理show2()的作用域链是:show2()->test()->window
,所以name就是xiyangyang。
五. 作用域链和代码优化
看完上面的所有内容的同学就会很容易理解这里,如下这个小例子:
1 2 3 4 5 |
|
大家都知道document是全局变量,也就是在作用域链的最尾部,查找是很消耗资源的,所以需要优化,优化后代码为:
1 2 3 4 5 6 |
|
这样找一次就够了,所以当一个对象被跨作用域访问时,可以把它存储为局部变量使用,这样就起到了优化的作用。
六. 修改作用域链
这里就简单的提一下,能理解就有好了,with和catch会修改函数的作用域链。
(1)如果代码块中有with,则with中的所有对象会置于当前作用域链的最顶层,当前函数会被置于第二层。会降低代码的性能,所以不推荐使用。
(2)catch语句会把异常对象置于作用域链的顶部,当前执行函数会被置于第二层。同样影响代码的性能。