javascript作用域和作用域链

一、全局作用域和局部作用域

大家都知道，在javascript中var一个新的变量，那么这个变量在javascript中的任意位置都能访问到，而在javascript的function中var一个新的变量，那么这个变量只能在这个函数内访问到，而在全局访问不到。

  var profession="程序员";
  function jianshu(){
    console.log(profession);
    var author="我不叫奇奇";
    function hobby(){
      console.log("吉他");
    }
    hobby();
    age=19;
  }
  console.log(profession);//程序员
  console.log(author);//error
  hobby();//error
  jianshu();//程序员 吉他
  console.log(age);//19

profession作用域是全局，所以函数内也能访问到。
author、hobby的作用域是jianshu内，所以全局不能使用。
所有末定义直接赋值的变量自动声明为拥有全局作用域，所以age的作用域是全局。

二、作用域链

在javascript中，一切皆对象，当然，函数也是对象，而每一个函数在创建出来的时候有一些自带的属性，其中有一个叫[[scope]],该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

  function sum(a,b){
    var sum=a+b;
  }

函数被创建的时候他的作用域链中会默认填入一个全局函数，如下图所示

而当函数执行的时候会创建出一个叫"执行期上下文"的内部属性。这个是默认的代码运行环境，一旦代码被载入，引擎最先进入的就是这个环境。它包含了函数内的[[scope]]中的全局函数，之后还会以函数中的局部变量、命名参数、参数集合、this，穿件一个活动对象，被放置在全局函数之上。

  function sum(a,b){
    var sum=a+b;
  }
 var total=sum(1,2);

如下图

三、作用域链的代码优化

刚刚我说过了运行期上下文，代码在执行的时候，系统会优先从scope链的最上层开始搜索（类似于栈的概念）。搜索不到会到下一个搜索，知道了这个，我们就可以进行代码的优化了。

  function animate(){
    document.getElementById("color").onclick=function(){
      document.getElementById("to-animate").color="red";
    }
  }

  function animate(){
    var doc=document;
    doc.getElementById("color").onclick=function(){
      doc.getElementById("to-animate").color="red";
    }
  }

当我们在函数内大量调用了某一个对象，如document，我们可以将document定义到局部变量中，这样document会被创建到scope链最顶端的active object中，每次可以更快的查找到document而不用反复查找。
注意：doc=document这条语句也进行了一次查询，所以如果只用到一次document，我们就没有必要再把document附加到局部变量了。

四、作用域链的改变

当一个函数被调用的时候，会相应的创建出一个执行期上下文的内部属性，当函数调用完成后这个内部属性会自行销毁，一般情况下，这个执行期上下文只会被with和catch影响。

  function animate(){
      with(document){
         var color = getElementById("color").color;
         if(color!="red"){
            getElementById("green").color="red";
         }
      }
  }

这里使用with来避免多次使用document，但是却产生了新的性能问题。
with会改变执行期上下文的值，如下图

一个新的可变对象被创建，而系统每次访问必须先经过这个可变对象，访问代价反而更高了。同样，try catch也和这个类似，当系统出现异常时，catch内的变量作为一个新的可变对象被放置在执行期上下文的顶端，访问代价反而更高了。

爱程序，爱前端，喜欢的朋友可以关注我，里面有更多关于前端的小知识。