JavaScript作用域学习笔记

作用域是变量与函数的可访问范围，作用域控制着变量与函数的可见性和生命周期。变量的作用域有两种：全局作用域和局部作用域。

作用域

全局作用域

拥有全局作用域的变量，在代码任何地方都能调用，一般在有三种：

• 最外层函数和在最外层函数外面定义的变量

  var a=0;//全局
  function test() {...}

• 没有通过关键字”var”声明的变量

  function test() {
  var a=0;//局部
  b=1;//全局
  }

• 浏览器中，window对象的属性

局部作用域

局部作用域一般只在固定的范围内可访问到，例如函数内部，所以也称为函数作用域。

function test() {
var a=0;//局部
b=1;//全局
}

a只能在test中访问。

作用域链

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里 ————JavaScript权威指南

在JavaScript中，一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链（Scope Chain），它决定了哪些数据能被函数访问。

JavaScript作用域实现是使用列表，而不是堆栈的方式。ECMA262中描述具体过程如下:
任何执行上下文时刻的作用域, 都是由作用域链(scope chain)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

定义下面这样一个函数：

function a(x,y){
var b=x+y;
return b;
}

当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数a创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量（图为部分变量）。

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

这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

var tatal=a(5,10);

在函数执行过程中，每遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义undefined。函数执行过程中，每个标识符都要经历这样的搜索过程。

代码优化

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

function a(){
var b=document.getElementById("#divid");
var c=document.getElementById("#pid");
}

函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。代码改下：

function a(){
var doc = document;
var b=doc.getElementById("#divid");
var c=doc.getElementById("#pid");
}

如果程序中有大量的全局变量被从反复访问，那么改写后的代码性能会有显著改善。

改变作用域链

函数每次执行时对应的运行期上下文都是独一无二的，所以多次调用同一个函数就会导致创建多个运行期上下文，当函数执行完毕，执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下，在运行期上下文运行的过程中，其作用域链只会被 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子句中唯一执行的代码。该函数接收异常对象作为参数，这样你可以更加灵活和统一的处理错误。由于只执行一条语句，且没有局部变量的访问，作用域链的临时改变就不会影响代码性能了。

预编译

JS是一种脚本语言，JS的执行过程，是一种翻译执行的过程。

<script>
 alert(typeof eve); //function
      function eve() {
           alert('I am Laruence');
      };
 </script>

在JS中, 是有预编译的过程的, JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式)。
如上文所说, 在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义,和函数定义, 将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined。

注意：

<script>
 alert(typeof eve); //结果:function
 alert(typeof walle); //结果:undefined
 function eve() { //函数定义式
      alert('I am Laruence');
 };
 var walle = function() { //函数表达式
 }
 alert(typeof walle); //结果:function
</script>

函数定义式和函数表达式不同, 对于函数定义式, 会将函数定义提前. 而函数表达式, 会在执行过程中才计算。

var name = 'laruence';
 age = 26;

不使用var关键字定义的变量, 相当于是全局变量, 联系到我们刚才的知识:
在对age做标识符解析的时候, 因为是写操作, 所以当找到到全局的window活动对象的时候都没有找到这个标识符的时候, 会在window活动对象的基础上, 返回一个值为undefined的age属性。
也就是说, age会被定义在顶级作用域中。

<script>
 alert(typeof eve); //结果:undefined
</script>
<script>
 function eve() {
      alert('I am Laruence');
 }
</script>

JS的预编译是以段为处理单元的。

例子巩固

例子：

var name = 'laruence';
function echo() {
 alert(name);
 var name = 'eve';
 alert(name);
 alert(age);
}
echo();

结果：

undefined
eve
[脚本出错]

例子：

var name = 'laruence';
 function echo() {
      alert(name);
 }

 function env() {
      var name = 'eve';
      echo();
 }

 env();

结果：

laruence

详细例子：

function factory() {
 var name = 'laruence';
 var intro = function(){
      alert('I am ' + name);
 }
 return intro;
}

function app(para){
 var name = para;
 var func = factory();
 func();
}

app('eve');

当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.

在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为’eve’的属性para;

此时的scope chain如下:

[[scope chain]] = [
{
 para : 'eve',
 name : undefined,
 func : undefined,
 arguments : []
}, {
 window call object
}
]

当调用进入factory的函数体的时候, 此时的factory的scope chain为:

[[scope chain]] = [
{
 name : undefined,
 intor : undefined
}, {
 window call object
}
]

注意到, 此时的作用域链中, 并不包含app的活动对象.

在定义intro函数的时候, intro函数的[[scope]]为:

[[scope chain]] = [
{
 name : 'laruence',
 intor : undefined
}, {
 window call object
}
]

从factory函数返回以后,在app体内调用intor的时候, 发生了标识符解析, 而此时的sope chain是:

[[scope chain]] = [
{
 intro call object
}, {
 name : 'laruence',
 intor : undefined
}, {
 window call object
}
]

因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性, 也就是’laruence’.

所以运行结果是:

I am laruence

参考资料：
http://www.laruence.com/2009/05/28/863.html
http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html