js作用域链和函数的执行

示例代码

var color = 'red';
function testColor(){
   var color_2 = 'green';
   function testColor_2(){
       var color_3 = 'blue';
       console.log(color_2 );
   }
   testColor_2();
}
testColor();//green

（一）作用域链

1.执行环境

执行环境包含全局的执行环境和局部的执行环境。在web浏览器中，全局的执行环境就是window对象。函数的执行环境则为局部执行环境。

执行环境定义了变量和函数有权访问的其他数据，每个执行环境都有一个与之相关的变量对象，环境中定义的所有变量和函数都保存在这个对象中，如果这个环境是函数的环境，则讲函数的活动对象作为变量对象。

当某个执行环境中的代码都执行完成了，则该环境会被销毁，保存在其中的变量和函数定义也会被销毁。

如上诉实例代码所示，包含三个执行环境：

• 全局的执行环境，变量对象包含变量color和函数testColor
• testColor的执行环境，变量对象包含arguments、color_2和testColor_2
• testColor_2的执行环境，变量对象包含arguments、color_3

2.作用域链

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

如上诉实例代码，函数testColor_2的作用域链包含testColor_2自身的变量对象，testColor_1的变量对象以及全局的变量对象。函数testColor_2内部在使用变量color_2的时候会先搜索自身的变量对象是否存在color_2，然后沿着作用域链向上搜索各个变量对象，发现testColor_1的变量对象存在color_2，便使用该变量。

3.延长作用域链

有以下两种方法会在作用域链的最前端添加一个变量对象。

（1）try-catch中的catch

catch语句创建的变量对象包含被抛出的错误对象的声明。

示例代码

function message(){
    try{
        adddlert("Welcome guest!");
    }catch(err){
        console.log(err.message)
    }
}

说明

catch语句中的err错误对象会加入到作用域前端新创建的变量对象中去。

（2）with

with语句会在作用域前端创建一个新的变量对象，并且将其接收到的对象的属性和方法加到新的变量对象中去。

示例代码

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

说明

• location的属性和方法会被加入到作用域链最前端新建的变量对象中去，因此可以使用location的href属性。
• with语句中定义的url，是在buildUrl执行环境的变量对象中的，因此可以return url
  

（二）函数执行的过程

1.创建活动对象

2.创建arguments对象，保存着函数传递进来的参数

arguments类似一个数组，却不是数组，可以通过arguments[0]的下标方式获取到对应的参数值。

3.创建作用域链

每一个函数内部都会创建一个[[scope]]属性,对应的是一个存放变量对象(活动对象)的列表，称为作用域链，创建函数执行环境时，将定义函数所在的执行环境对应的作用域链复制到当前函数的[[scope]]属性，并把自己的活动对象(变量对象)推入到[[scope chain]]的顶部。

4.继续丰富变量对象

执行函数的预处理，详细请看《JS函数的预处理》

5.为“this”赋值

“this”的深入理解也是个重要的知识点，以后会开篇讲述。

以上是学习js作用域链和函数的执行的笔记，还有很多细微之处有待以后更加深入学习。目前有一点小疑问，就是预处理中的“词法环境”和作用域链中的“变量对象”是什么关系，暂时理解为时同一个东西。