JavaScript高级程序设计第四章变量,作用域和内存问题——执行环境及作用域

4.2执行环境和作用域

在Web浏览器中，全局执行环境被认为是window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的，某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。

每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。

当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行代码所在环境的变量对象，一层一层向外直到全局执行环境的变量对象始终都是作用域链的最后一个对象。

var color = "blue";
function a(){
   var aa = "red";
   function b(){
      var bb = aa;
      aa = color;
      color = bb;
      //这里可以访问color，aa和bb
   }
  //这里可以访问color，aa但是不能访问bb
  b();
}
//这里只能访问color
a();

内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。

4.2.1延长作用域链

虽然执行环境的类型总共只有两种——全局和局部（函数），但是还是有其他办法来延长作用域链，这么说是因为有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。具体来说，就是当执行流进入下列任何语句时，作用域链就会得到加长：

1.try-catch语句的catch块：会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明

2.with语句：会将指定的对象添加到作用域链中

function buildUrl(){
   var qs = "?debug=true";
   with(location){
       var url = href + qs;
   }
}

在此，with语句接收的是location对象，因此其变量对象中就包含了location对象的所有属性和方法，而这个变量对象被添加到作用域链的前端，buildUrl()函数中定义了一个变量qs，当在with语句中引用变量href时（实际引用的是location.href），可以在当前执行环境的变量对象中找到。

4.2.2没有块级作用域

if(true){
   var color = "blue";
}
alert(color);//"blue"

在JavaScript中，if语句中的变量声明会将变量添加到当前的执行环境（在这里是全局变量）中。

在使用for语句时也是有差异的

for(var i=0; i<10; i++){
    doSomething(i);
}
alert(i);//10

在JavaScript中，由for语句创建的变量i即使在for循环结束后，也依旧会存在于循环外部的执行环境中。

1.声明变量

使用var声明的变量会自动被添加到最接近的环境中，在函数内部，最接近的环境就是函数的局部环境，在with语句中，最接近的环境是函数环境。如果初始化变量时没有使用var声明，该变量会自动添加到全局环境。

function add(num1,num2){
    var sum = num1 + num2;
    return sum;
}
var result = add(10,20);//30
alert(sum);//由于sum不是有效的变量，因此导致错误

以上代码函数add()定义了一个名为sum的局部变量，该变量包含加法操作的结果。虽然结果值从函数中返回了，但变量sum在函数外部是访问不到的，如果省略var关键字，sum就可以访问到：

function add(num1,num2){
    sum = num1 + num2;//添加到全局变量中了，函数执行完毕依然可以返回
    return sum;
}
var result = add(10,20);//30
alert(sum);

2.查询标识符

当在某个环境中为了读取和写入而引用一个标识符时，必须通过搜索来确定该标识符实际代表什么。搜索过程从作用域链的前端开始，向上逐级查询，在局部中找到就停止搜索，在局部中没找到，就继续向上搜索。

var color = "blue";
function getColor(){
     return color;
}
alert(getColor());//"blue"

调用本例中的函数getColor()时会引用变量color，为了确定变量color的值，将开始一个两步搜索的过程，首先搜索getColor()的变量对象，查找其中是否包含color标识符，没有的话，继续搜索下一个变量对象（全局环境的变量对象），然后在那里找到了名为color的标识符，因为搜索到了定义这个变量的变量对象，搜索过程结束。

在搜索过程中，如果局部环境中存在着同名标识符，就不会使用位于父环境中的标识符，例子如下：

var color = "blue";
function getColor(){
     var color = "red"
     return color;
}
alert(getColor());//"red"