任何程序设计语言都有作用域的概念，简单的说，作用域控制着变量与函数的可见性和生命周期。ES6之前，JS变量的作用域分为全局作用域和局部作用域两种。
1.变量作用域
理解函数作用域需要理解以下几点：
（1）函数变量的作用域有全局变量和局部变量两种,全局的或者省略var声明的变量就是全局变量
（2）函数体内部可以读取到函数外的变量，而函数外不能读取到函数内的变量！
var num=0;//全局变量
function sayHello(people){
var str="hello "+people; //局部变量
console.log(str);
log=1；//全局变量
}
在理解了函数变量的作用域之后，也需要理解函数的作用域链了：
（1）每一个函数都有一个与之相关的作用域链，当js在查找变量X时，它会从链的第一个对象开始查找，如果这个对象有一个名为X的属性值，则会直接使用这个 属性值，如果没有就继续下一个对象寻找...一直找到最后都没有的话则会输出ReferenceError引用错误！
（2）作用域链查找的顺序是：当前函数对象-->上一层函数对象...-->window全局对象！
2.作用域链
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该属性包含函数被创建所在作用域的变量对象（Variable Obejct）的集合(注意：[[scope]]并不代表完整的作用域链！)
当一个函数定义后，它实际上保存一个作用域链。如果这个函数在全局环境下被定义，那这个作用域链里就只有全局作用域。例如定义下面这样一个函数：
function func(times) {
var num = 2；
num*=times;
alert(num);
}
func(2);
在函数func定义时，它的作用域链[[scope]]中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示（注意：图片只例举了全部变量中的一部分）：
1.png
执行此函数时会创建一个称为“运行期上下文(execution context)”（有人称为运行环境）的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析。
（1）当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。
（2）然后，解释器创建一个称为“活动对象（activation object）”的新的内部对象，这个活动对象包含当前这个执行函数里所有的变量对象定义着一个函数内定义的参数列表、内部变量和内部函数以及this。然后此对象会被推入执行期上下文里作用域链的前端。
当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：
2.png
在func函数里又定义了个inner函数，作用域链怎么发展？？？
在func函数里又定义了个inner函数，func函数在执行时，inner函数被定义，也就是说inner函数对象被创建。
inner函数对象在创建时内部[[Scope]]属性指向的作用域链初始化为func函数执行期上下文的作用域链。当执行inner函数时也是先创建执行期上下文。执行期上下文的创建过程和执行func函数时的一样，这里就不重复了。
变量对象VO：全局对象GO和活动对象AO
在函数执行过程中，每遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。
3. 作用域链和代码优化
从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如下面的代码：
function changeFontColor(){
document.getElementById("btn").onclick=function(){
document.getElementById("list").style.color="#e4e4e4";
};
}
这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：
function changeFontColor(){
var doc=document;
doc.getElementById("btn").onclick=function(){
doc.getElementById("list").style.color="#e4e4e4";
};
}
这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有所改善。
4.改变作用域链
函数每次执行时对应的运行期上下文都是独一无二的，所以多次调用同一个函数就会导致创建多个运行期上下文，当函数执行完毕，执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下，在运行期上下文运行的过程中，其作用域链只会被 with 语句和 catch 语句影响。
（1）with 语句用于拓展作用域，延长作用域链。
当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了,应避免使用with语句。在with语句执行完之后恢复原来运行期上下文的作用域。
var a={},a.name='张三';a.sex='女';
//一般的调用方式
console.log(a.name);
console.log(a.sex);
//使用with之后的调用
with(a){
console.log(name);
console.log(sex);
}
（2）当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中。
try{
......
}catch(e){
alert(e.message);//作用域链在此处改变
}
请注意，一旦catch语句执行完毕，作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用，因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理
try{
......
}catch(e){
handleError(e);//委托给处理器方法
}
优化后的代码，handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数，这样你可以更加灵活和统一的处理错误。由于只执行一条语句，且没有局部变量的访问，作用域链的临时改变就不会影响代码性能了。
网友评论