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

大家好，我是IT修真院成都分院第8期的学员，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下js中作用域和作用域链的相关问题。

---

一、作用域的概念

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

全局作用域(Global Scope)：

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

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

var aName="6得飞起";

function doSomething(){

var bName="步得步说";

function innerSay(){

alert(bName);

}

innerSay();

}

alert(aName);//6得飞起

alert(bName);//脚本错误

doSomething();//步得步说

innerSay()//脚本错误

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

function doSomething(){

bName="我爱红色毛爷爷";

alert(bName)

}

alert(bName);//我爱红色毛爷爷

局部作用域(Local Scope)

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

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

function doSomething(){

varbName="我今天开会";

function innerSay(){

alert(bName);

}

innerSay();

}

alert(bName);//脚本错误innerSay();//脚本错误

二、作用域链(Scope Chain)

有了JavaScript的作用域的划分，那么可以将JavaScript的访问作用域连成一个链式树状结构.

JavaScript的作用域链一旦能清晰的了解，那么对于JavaScript的变量与闭包就是非常清晰的了.

下面采用绘图的办法，绘制作用域链.

绘制规则：

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(){

varnum =20;

varfunc3 =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: [ ] };

最终可以将作用域链表示为

// 这里用伪代码描述varlink = [// 0级链num,

{ func1 : [// 第一条1级链num,

{ func2 : [// 2级链num] }

]},

{ func2 : [// 第二条1级链num,

{ func3 : [] }

]}

];