做用域&做用域链和with，catch语句&闭包

---

做用域（函数）

做用域：变量与函数的可访问范围，即做用域控制着变量与函数的可见性和生命周期;
在一些类C编程语言中花括号内的每一段代码都有各自的做用域，并且变量在声明它们的代码段外是不可见的，称之为块级的做用域；JavaScript容易让初学者误会的地方也在于此，JavaScript并无块及的做用域，只有函数级做用域：变量在声明它们的函数体及其子函数内是可见的。
变量的做用域:全局做用域和局部做用域两种.

全局变量（global scope）:做用域是全局，在代码的任何地方都有定义；
局部变量（local scope）:做用域函数局部，函数参数和局部变量只在函数体内定义；

局部变量的优先级 高于同名的全局变量；
声明局部变量时，必定要使用var ，不然解释器会将变量当作全局对象window属性；

window对象的全部属性拥有全局做用域；在代码任何地方均可以访问，函数内部声明而且以var修饰的变量就是局部变量，只能在函数体内使用，函数的参数虽然没有使用var但仍然是局部变量。

var test1 = "globalVariable";
　　function test(){
　　　　console.log(test1);　//globalVariable　
　　　　test1 = "localVariable";//去掉  var
　　　　console.log(test1); //localVariable
　　}
 test()；

JavaScript变量函数的解析或者声明提早，JavaScript虽然是解释执行，但也不是循序渐进逐句解释执行的，在真正解释执行以前，JavaScript解释器会预解析代码，将变量、函数声明部分提早解释，这就意味着咱们能够在function声明语句以前调用function，可是对于变量的不能够；

foo();//1
function foo() {
   return console.log(1);
  //return console.log(foo);==>function foo() {return console.log( foo);};
  //return console.log(typeof foo); ==> function;
}

console.log(a); //undefined
var a=3;
console.log(a); //3
console.log(b); //Uncaught ReferenceError: b is not defined

编辑器执行效果：
var a;
console.log(a); //undefined
a=3;
console.log(a); //3

函数内的变量声明提早：
var test1 = "globalVariable";
　　function test(){
　　　　console.log(test1);　//undefined　
　　　　var test1 = "localVariable";
　　　　console.log(test1); //localVariable
　　}
 test()；

编辑器执行效果：
　var test1 = "globalVariable";
　function test(){
　　  var test1;　　//将函数内的变量声明提早至函数顶部
　　  console.log(test1);　　//undefined　
　　  test1 = "localVariable";　　//赋值
　 　console.log(test1);  //localVariable
　}
情景1
function test(){  
    for(var i=0;i<3;i++){  
        console.log(i); // 输出 0 1 2   
    }  
    console.log(i); // 输出 3  
}  
test();
情景2
  function test(){  
            var  i=0;
             return  function(){
                 console.log(i++);
              //   console.log(++i);
            }  
        }
       t2=test();
      var t1=test();

      t1();//0    
      t1();//1
      t2();//0
      t2();//1
      t2();//2


情景一：
var test1 ;
function test(){
　　 test1 = "localVariable";
}
console.log(test1);　//undefined　
 test()；
 console.log(test1)//localVariable

情景二：
var test1 ;
function test(){
　　var test1 = "localVariable";
}
console.log(test1);　//undefined;
 test()；
 console.log(test1)//undefined;

is not defined：未定义;
undefined:定义了，未赋值de类型是undefined；
typeof  "undefined"  //"string"
typeof  undefined   //undefined;
Number(undefined)  //NaN；

Null：未存在；
typeof Null //object;
NaN: 非空;
typeof NaN  //number;
Number(null) // 0；

做用域链

执行此函数时会建立一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。每一个运行期上下文都有本身的做用域链，用于标识符解析，当运行期上下文被建立时，而它的做用域链初始化为当前运行函数的[[Scope]]所包含的对象。

　　这些值按照它们出如今函数中的顺序被复制到运行期上下文的做用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的全部局部变量、命名参数、参数集合以及this，而后此对象会被推入做用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。
　　在函数执行过程当中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从做用域链头部，也就是从活动对象开始搜索，查找同名的标识符，若是找到了就使用这个标识符对应的变量，若是没找到继续搜索做用域链中的下一个对象，若是搜索完全部对象都未找到，则认为该标识符未定义。函数执行过程当中，每一个标识符都要经历这样的搜索过程。

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

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}
这个函数引用了两次全局变量document，查找该变量必须遍历整个做用域链，直到最后在全局对象中才能找到。这段代码能够重写以下：

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

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

with语句

做用域链只会被 with 语句和 catch 语句影响。
　函数每次执行时对应的运行期上下文都是独一无二的，因此屡次调用同一个函数就会致使建立多个运行期上下文，当函数执行完毕，执行上下文会被销毁。每个运行期上下文都和一个做用域链关联。通常状况下，在运行期上下文运行的过程当中，其做用域链只会被 with 语句和 catch 语句影响。

with语句是对象的快捷应用方式，用来避免书写重复代码。

function initUI(){
    with(document){
        var bd=body,
            links=getElementsByTagName("a"),
            i=0,
            len=links.length;
        while(i < len){
            update(links[i++]);
        }
        getElementById("btnInit").onclick=function(){
            doSomething();
        };
    }
}
这里使用width语句来避免屡次书写document，看上去更高效，实际上产生了性能问题。
当代码运行到with语句时，运行期上下文的做用域链临时被改变了。一个新的可变对象被建立，它包含了参数指定的对象的全部属性。这个对象将被推入做用域链的头部，这意味着函数的全部局部变量如今处于第二个做用域链对象中，所以访问代价更高了。



所以在程序中应避免使用with语句，在这个例子中，只要简单的把document存储在一个局部变量中就能够提高性能。

　　另一个会改变做用域链的是try-catch语句中的catch语句。当try代码块中发生错误时，执行过程会跳转到catch语句，而后把异常对象推入一个可变对象并置于做用域的头部。在catch代码块内部，函数的全部局部变量将会被放在第二个做用域链对象中。示例代码：
try{
    doSomething();
}catch(ex){
    alert(ex.message); //做用域链在此处改变
}
请注意，一旦catch语句执行完毕，做用域链机会返回到以前的状态。try-catch语句在代码调试和异常处理中很是有用，所以不建议彻底避免。你能够经过优化代码来减小catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理，例如
try{
    doSomething();
}catch(ex){
    handleError(ex); //委托给处理器方法
}

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

闭包

如何从外部读取局部变量？

　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

f2函数，就是闭包，闭包就是可以读取其余函数内部变量的函数。因为在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成"定义在一个函数内部的函数"。
因此，在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。

闭包的用途;

闭包能够用在许多地方。它的最大用处有两个，一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中。


　　function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证实了，函数f1中的局部变量n一直保存在内存中，并无在f1调用后被自动清除。


为何会这样呢？缘由就在于f1是f2的父函数，而f2被赋给了一个全局变量，这致使f2始终在内存中，而f2的存在依赖于f1，所以f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另外一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，所以nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数自己也是一个闭包，因此nAdd至关因而一个setter，能够在函数外部对函数内部的局部变量进行操做。
5、使用闭包的注意点
1）因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。
2）闭包会在父函数外部，改变父函数内部变量的值。因此，若是你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时必定要当心，不要随便改变父函数内部变量的值。