前端学习之——作用域和作用域链

作用域和执行上下文的区别：

作用域代表访问变量和函数的一个能力或者说是变量和函数的可见性,而上下文通常是跟this对象有关，它定义了变量和函数有权访问的其他数据，决定它们各自的行为。

 

在JavaScript中变量作用域分为全局作用域和局部作作用域（通常指函数作用域）

在JavaScript中变量作用域是没有块及作用域的，使用的是函数作用域。

 

示例：

var num =0;

function add() {
  var addN = 1;
  num += addN;    
}

add();

 

这段代码包含两个作用域：a.全局作用域；b.add函数的作用域，也就是只有两个变量对象，当执行到对应的执行环境时，该变量对象会成为活动对象(activation object)，并被推入到执行环境作用域链的前端，也就是成为优先级最高的那个。 下面是示例图

JavaScript里函数对象和其他对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中有个属性是[[Scope]]，包含了函数被创建的作用域中对象的集合，这个集合叫作用域链(scope chain)。作用域链保证对执行环境有权访问的所有变量和函数的有序访问，通俗点就是维持秩序。每个环境都按照作用域链向上搜索。作用域链的前端始终是当前执行代码所在环境的变量对象，向下就是来自包含(上一级/外部)环境，再下一个变量对象则来自下一个包含环境，知道找到全局执行环境，全局环境的变量对象始终是作用域链中的最后一个对象。

当创建add函数时，创建了一个预先包含变量对象的作用域链，它的作用域链被填入全局对象，该全局对象包含了所有全局变量，即图中作用域链中下标为0的全局变量对象，add的作用域链会在执行add函数时用到。

执行环境（execution context），定义了变量和函数有权访问的其他数据，决定了它们各自的行为。分全局和局部执行环境，但某个执行环境代码执行完后改环境就会被销毁，保存在其中的变量和数据也一起被销毁。当执行流进入函数时，函数的环境就会被推入环境栈中，等到函数执行后，栈会把函数的环境弹出，又把控制权返回给之前的环境。

• 全局执行环境指的是window对象，因此所有全局变量都是基于window对象的属性和方法创建的。全局环境要等到关闭网页或浏览器才会被销毁。
• 变量对象（variable object）：每个执行环境都有一个与之相关联的变量对象，用来存储环境中定义的变量和函数。

当函数执行时，会创建一个“执行环境”的内部对象，定义了函数的环境，当执行环境被创建时，它的作用域链就会被初始化为当前运行函数的[[scope]]所包含的对象，这些值按照它们出现在函数的顺序被复制到执行环境的作用域链中。它们共同组成一个新的对象叫做“活动对象(activation object)”，该对象包含了函数所有的局部变量，命名参数，参数集合以及this等。

当执行add函数，add的执行环境被创建，add的[[scope]]里的对象即作用域链被上面的图就变成：

活动对象会被推入作用域链的顶端，一直到函数执行完毕，执行环境被销毁，活动对象也会被销毁。

作用域链和代码优化

从作用域链的结构可以看出，在执行环境的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于执行环境作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。如下代码：

var num = 0;
function add () {
    var addN = 1;
    num++;
    addN += num;            
}

全局变量num在add函数里应用了两次，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到，可以改写成：

var num = 0;
function add (num) {
    //var global_num = num;//或者创建一个局部变量来存num
    var addN = 1;
    num++;
    addN += num;            
}

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

改变作用域链(延长作用域链)

一般情况下，在运行期上下文运行的过程中，其作用域链只会被 with 语句和 catch 语句影响。

function bulid(){
  var gets = "?name=xxx";  
  width(location){
       var url=href;
       url += gets;  
    }  
  return url;  
}

这里使用width语句来避免多次书写document，看上去更高效，实际上产生了性能问题。其作用域链图如下：

当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。因此在程序中应避免使用with语句，在这个例子中，只要简单的把location存储在一个局部变量中就可以提升性能。

再看try-catch语句：

另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中

try{
    doSomething();
}catch(erro){
    alert(erro.message); //作用域链在此处改变
}

 

请注意，一旦catch语句执行完毕，作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用，因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理，例如：

try{
    doSomething();
}catch(erro){
    errohandle(erro.message); //委托给处理器方法
}

优化后的代码，handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数，这样你可以更加灵活和统一的处理错误。由于只执行一条语句，且没有局部变量的访问，作用域链的临时改变就不会影响代码性能了。

 参考链接：http://blog.csdn.net/allenliu6/article/details/52516605