学习JavaScript已经很长时间了

今天打算回忆一下作用域的知识
作用域这个知识很基础并且非常重要
下面我就总结一下JavaScript中的作用域以及作用域链的相关知识

作用域

作用域是什么？
作用域是变量能够引用、函数能够生效的区域
它了你对内存空间上值的获取和修改
所有的语言都存在作用域
我们可以理解作用域为js引擎根据名称查找变量的一套规则
理解了作用域，我们才能去理解闭包等等一系列问题

[[Scope]]

大家都知道，函数是特殊的可执行对象
既然是对象，就可以拥有属性
函数中存在这一个内部属性[[Scope]]（我们不能使用，供js引擎使用）
函数被创建时，这个内部属性就会包含函数被创建的作用域中对象的集合
这个集合呈链式链接，被称为函数的作用域链
作用域链上的每一个对象被称为可变对象（Variable Obejct），
每一个可变对象都以键值对形式存在
举一个例子，看下面的全局函数

var a = 1;function foo(){ ...}

foo函数创建时，它的作用域链中插入了一个全局对象GO（Global Object），包含全局所有定义的变量

// 伪代码
foo.[[Scope]] = {
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 ......
 a: undefined, // 预编译阶段还不知道a值是多少
 foo: function(){...},
 }
}

执行环境

在函数执行时，会创建一个叫做执行环境/执行上下文（execution context）的内部对象
它定义了一个函数执行时的环境
函数每次执行时的执行环境独一无二
多次调用函数就多次创建执行环境
并且函数执行完毕后，执行环境就会被销毁
执行环境有自己的作用域链，用于解析标识符

看到这里可能大家有点蒙，我再给大家说明一下我的理解
[[Scope]]和执行期上下文虽然保存的都是作用域链，但不是同一个东西
现在先明确一点区别
[[Scope]]属性是函数创建时产生的，会一直存在
而执行上下文在函数执行时产生，函数执行结束便会销毁

实例

我把上面的例子扩展一下再进行详细说明

var a = 1;function foo(x, y){
 var b = 2; function bar(){
 var c = 3;
 }
 bar();
}
foo(100, 200);

下面我就通过这几行代码把作用域链以及执行环境详细说明一下
还是建议各位同学先看看我写的这个预编译

// 伪代码：foo函数创建产生[[Scope]]对象
foo.[[Scope]] = {
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: undefined, //预编译阶段还不知道a的值是多少，执行过程中会修改
 foo: function(){...},
 ......
 }
}

// 伪代码：foo函数执行前产生执行期上下文EC复制foo中[[Scope]]属性保存的作用域链
foo.EC = {
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

// 伪代码：foo函数预编译产生AO活动对象，挂载到foo中EC作用域链的最前端
foo.EC = {
 AO: {
 this: window,
 arguments: [100,200],
 x: 100,
 y: 200,
 b: undefined,
 bar: function(){...}
 },
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

// 伪代码：bar函数创建产生[[Scope]]对象
bar.[[Scope]] = {
 AO: {
 this: window,
 arguments: [100,200],
 x: 100,
 y: 200,
 b: undefined,
 bar: function(){...}
 },
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

// 伪代码：bar函数执行产生执行上下文
bar.EC = {
 AO: {
 this: window,
 arguments: [],
 c: undefined,
 },
 AO: {
 this: window,
 arguments: [100,200],
 x: 100,
 y: 200,
 b: 2,
 bar: function(){...}
 },
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

变量解析过程

不知道我写这么多大家理解没有
js引擎就是通过作用域链的规则来进行变量查找（准确的说应该是执行上下文的作用域链）
查找过程就拿上面的代码来说，比如说我在bar函数内加一行console.log(a);
那么bar函数执行时，js引擎想要打印a，于是就去作用域链上查找
第一层AO没有
第二层AO没有
第三层GO找到了变量a
于是返回了变量a的值
相信大家在了解了作用域之后，就会理解为什么全局环境为什么不能访问局部环境

性能问题

今天写high了，像吃了炫迈一样，那就顺便把性能问题也说清楚了吧
js引擎查找作用域链是为了解析标识符
占用了时间理所当然的产生了性能开销
所以解析标识符有代价，你的变量在执行环境作用域链的位置越深，读写速度就越慢
这很容易理解
在函数中读写局部变量总是最快的，读写全局变量通常最慢
当然了，这些额外的性能开销对于优化js引擎（比如chrome的V8 (⊙▽⊙)）来说可能微不足道，甚至可以毫不夸张的说没有性能损失
但是还是要照顾大多浏览器
所以推荐大家养成这样的编码习惯：尽量使用局部变量（缓存）
我举一个小例子

function demo(){
 var a = document.getElementById('a');
 var b = document.getElementById('b');
 var c = document.getElementById('c');
 a.onclick = function(){ ...
 }
 a.style.left = ...;
 a.style.top = ...;
 b.style.backgroundColor = ...;
 c.className = ...;
 document.body.appendChild(...);
 document.body.appendChild(...);
 document.body.appendChild(...);
}

这段代码看起来缓存了，优化了代码
但其实这段代码执行过程中，js引擎解析标识符，要查找6次document
而且document存在于window对象
也就是作用域链的最末尾
所以我们再进行缓存，包括document.body、a.style
再加上单一var原则
重构函数

function demo(){
 var doc = document,
 bd = doc.body,
 a = doc.getElementById('a'),
 b = doc.getElementById('b'),
 styleA = a.style;
 a.onclick = function(){ ...
 }
 styleA.left = ...;
 styleA.top = ...;
 styleA.backgroundColor = ...;
 b.className = ...;
 bd.appendChild(...);
 bd.appendChild(...);
 bd.appendChild(...);
}

总结

其实写了这么多，还有一个问题我没写到，就是作用域链在某些特殊情况下是可以动态改变的
比如with()、eval()等等，当然这些都不建议使用，我总结了一篇文章
有兴趣的同学可以看看 ->传送门<-
还是总结一下今天写的作用域链相关知识