js的作用域与作用域链

JavaScript的作用域和作用域链。在初学JavaScript时，觉得它就和其他语言没啥区别，尤其是作用域这块，想当然的以为“全局变量就是在整个程序的任何地方都可以访问，也就是写在函数外的变量，局部变量也就是写在函数内部或循环体内部，出了循环体和函数就不可访问”，但是在JavaScript中并不是这么简单，需要去深入的学习。

---

一. 什么是作用域
任何程序语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围。比如C/C++等，都是块级作用域，也就是说在每一个代码块内声明的变量，出了这个代码块就是不可见的，而JS根本就没有块级作用域这个概念，而是函数作用域。如下面的例子：

1 2 3 4 5 6 7 8 9 10

function test(){     var sum = 0;     for (var i = 0; i < 2; i++)     {         sum = sum + i;     }     console.log(i); }   test();

上面的程序输出结果为2，知道c和c++或java的同学都会知道，在for循环体块中定义的变量，在循环体外部是不可访问的，可是在JS中，没有块作用域这个概念，只有函数作用域的概念，所以只要是在函数体内部定义的变量，在这个函数体内都是可访问的。

二. 函数作用域
看到上面的小例子，应该对函数作用域有一点模糊的理解吧。其实也就是说，变量和函数在声明它们的函数体中，和这个函数体嵌套的任意函数体内部都是可访问的。下面再看个小例子：

1 2 3 4 5 6 7 8 9 10 11

function test(){     var name = "xiyangyang";       function showname(){         console.log(name);     }     showname(); }   test(); //xiayangyang showname(); //ReferenceError: showname is not defined

结果如代码后的注释，可见变量和函数只在当前运行函数体的内部有效，在当前运行函数体的外部是无效的。

三. 变量作用域
JS的变量计较特殊，下面是一些小例子，请看它的特殊点：
（1）全局变量被覆盖：

1 2 3 4 5 6 7 8 9

var name = "huitaiyang"   function test(){     console.log(name);     var name = "xiyangyang";     console.log(name); }   test();

如上代码不知道JS变量作用域的肯定会觉得，第一个输出“huitaiyang”，第二个输出“xiyangyang”，其实不是的，第一个会输出“undefined”，第二个是“xiyangyang”（其实一开始我也是这么想的），无论如何请随时谨记，JS是函数作用域，也就是它首先会在函数内部寻找name属性，找不到才会继续往上一层寻找。
这个小例子中，在test函数内部有name的定义，也就是找到了，它不会在往上层寻找了，但是name在打印时并没有赋值，所以就输出了undefined，第二次打印时已经赋值，就是正常的“xiyangyang”。

（2）没有var声明的局部变量，上升为全局变量：

1 2 3 4 5 6 7

function test(){     name = "xiyangyang";     console.log(name); }   test(); console.log(name);

上面代码两次打印结果都是“xiyangyang”，所以没有var声明的变量都是全局变量，是window对象的属性，console.log(name); 这样和上面的结果一致。

四. 作用域链
一旦函数创建，函数的作用域就确定了，作用域链就由作用域中对象的集合组成。当函数执行时，它会把当前正在执行的函数内部的所有变量（包括this）置于作用域链的首部，会把该函数外部的对象置于第二，第三…层，window对象置于最外层。作用域链的层数和函数的层数有关。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var name = "huitaiyang"   function test(){     var name = "xiyangyang";     function show1(){         var name = "lanyangyang";         console.log(name);     }     function show2(){         console.log(name);     }     show1();     show2(); }   test();

在上面的例子中，打印出来的结果是“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

function changeColor(){     document.getElementById('btn').onclick = function(){         document.getElementById('obj').style.backgroundColor = 'red';     }; }

大家都知道document是全局变量，也就是在作用域链的最尾部，查找是很消耗资源的，所以需要优化，优化后代码为：

1 2 3 4 5 6

function changeColor(){     var doc = document;     doc.getElementById('btn').onclick = function(){         doc.getElementById('obj').style.backgroundColor = 'red';     }; }

这样找一次就够了，所以当一个对象被跨作用域访问时，可以把它存储为局部变量使用，这样就起到了优化的作用。

六. 修改作用域链
这里就简单的提一下，能理解就有好了，with和catch会修改函数的作用域链。
（1）如果代码块中有with，则with中的所有对象会置于当前作用域链的最顶层，当前函数会被置于第二层。会降低代码的性能，所以不推荐使用。
（2）catch语句会把异常对象置于作用域链的顶部，当前执行函数会被置于第二层。同样影响代码的性能。