如何理解JS中作用域和作用域链

1.背景介绍

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

2.知识剖析

1.全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：

            
var aName="泷泽萝拉";
function doSomething(){var bName="吉泽明步";function innerSay(){alert(bName);}innerSay();
}
alert(aName); //泷泽萝拉
alert(bName); //脚本错误
doSomething(); //吉泽明步
innerSay() //脚本错误

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

            
function doSomething(){bName="加藤鹰";alert(bName)
}
alert(bName); //加藤鹰

(3)所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都都拥有全局作用域，例如window.name、window.top等等。

1. 局部作用域(Local Scope)

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域

例如下列代码中的bName和函数innerSay都只拥有局部作用域：

            
function doSomething(){var bName="杨泽平";function innerSay(){alert(bName);}innerSay();
}
alert(bName); //脚本错误
innerSay(); //脚本错误

作用域链(Scope Chain)

有了JavaScript的作用域的划分，那么可以将JavaScript的访问作用域连成一个链式树状结构.
JavaScript的作用域链一旦能清晰的了解，那么对于JavaScript的变量与闭包就是非常清晰的了.
下面采用绘图的办法，绘制作用域链.
3.1 绘制规则：
1) 作用域链就是对象的数组
2) 全部script是0级链，每个对象占一个位置
3) 凡是看到函数延伸一个链出来，一级级展开
4) 访问首先看当前函数，如果没有定义往上一级链检查
5) 如此往复，直到0级链

先看一段代码

                var num = 10;var func1 = function() {var num = 20;var func2 = function() {var num = 30;alert(num);};func2();};var func2 = function() {var num = 20;var func3 = function() {alert(num);};func3();};func1();func2();

下面分析一下这段代码：
-> 首先整段代码是一个全局作用域，可以标记为0级作用域链，那么久有一个数组
var link_0 = [ num, func1, func2 ];// 这里用伪代码描述
-> 在这里func1和func2都是函数，因此引出两条1级作用域链，分别为
var link_1 = { func1: [ num, func2 ] };// 这里用伪代码描述
var link_1 = { func2: [ num, func3 ] };// 这里用伪代码描述
-> 第一条1级链衍生出2级链
var link_2 = { func2: [ num ] };// 这里用伪代码描述
-> 第二条1级链中没有定义变量，是一个空链，就表示为
var link_2 = { func3: [ ] };

-> 将上面代码整合一下，就可以将作用域链表示为

               // 这里用伪代码描述var link = [ // 0级链num,{ func1 : [ // 第一条1级链num,{ func2 : [ // 2级链num] }]},{ func2 : [ // 第二条1级链num,{ func3 : [] }]}];

4.常见问题

如何更加直观的体现作用域链

4.解决方案

脚本之家

5.编码实战

6.扩展思考

如何运用作用域链的知识进行闭包优化优化

脚本之家

其实作用域链就是JS引擎查询数据的一个链表，后定义的覆盖先定义的，查询不到定义的数据就往深一层查询，一直到全局作用域为止

                
function changeColor(){document.getElementById("btnChange").onclick=function(){document.getElementById("targetCanvas").style.backgroundColor="red";};
}

这段代码可以重写如下：

                
function changeColor(){var doc=document;doc.getElementById("btnChange").onclick=function(){doc.getElementById("targetCanvas").style.backgroundColor="red";};
}

这段代码比较简单，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

7.参考文献

参考一51cto

参考二博客

问题：

//undefined和 is a not defined有什么区别？？

==》当声明一个变量而没有赋值的时候会是undefined，当根被没有声明变量的时候，会是 is a not defined。

//那为什么不能都设置成全局变量呢？？？

==》全局变量其实都是在Window对象下的变量，设置的全局多了以后会造成全局变量污染，不容易维护，且性能降低。。。每找一次变量，找到最外层window才能找到变量。

//在函数中途声明一个变量，之前的还是局部变量么？

==》在函数中途声明一个变量，这个声明会有一个声明提升的作用，相当于把 var 提升到函数的最上部，所以这个变量就是局部变量了。

//作用域和执行环境一样么？？

==》是两个不同的概念。作用域主要指的就是作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期，而执行环境是定义了变量或者函数有权访问的其他数据，决定了各自的行为。

//为什么window.xx也能找到属性名字？？？

==》因为全局变量本身就是在window对象下的。

就行像调用window.location等其他方法一样。

//怎么让一个函数自执行

==> (function () {}()) 即可自执行。