理解JavaScript作用域链

作用域链(Scope Chain)

JavaScript中的一种重要机制，JS中所有的标识符（Identifier）都是通过Scope Chain来查找值的。

<script type="text/javascript">var i = "w i";/*   词法作用域(Lexical Scoping)   JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.   这个作用域我们称之为[[scope]]   非内嵌函数的[[scope]]都是宿主对象，不同的宿主会有不同的内容*/var a =function(){    alert(i);}var b = function(){    var i = "b i";    a();}var c = function(){    a();}a();/*   函数在运行的时候，会先创建一个call Object，   将函数的形参、变量和函数申明的结果都添加到call Object作为属性；   把call Object添加到该函数的作用域链的最前面；   然后，再将函数定义时的[[scope]]添加到它的作用域链中；   函数体内的标识符查找   先从Scope Chain中第一个对象找，存在则返回，否则   继续查找下一个对象，存在则返回，否则（重复此步骤）   最后找不到则返回undefined*/b();c();/*   JavaScript中的scope Chain的机制使得闭包得以实现*/var d = function(){    var i = "d i";    var e = function(){        alert(i);    }    return e;}var f = d();f();/*   f是function e的引用   call Object部分：没有形参、变量申明和内部函数；   [[scope]]部分：e定义在函数d体内，e的[[scope]]中可以访问到d,i,e，然后d也会有一个[[scope]]，又可以接着往上访问，这样，便形成一条链*/</script>

具名函数表达式与匿名函数表达式和函数申明的区别
   winter:
   正常的函数定义时是直接把[[scope]]设为定义时的scope chain
   但是具名函数表达式是先给scope chain加入一个new Object
   之后再将[[scope]]设为新的scope chain
   设完后再将[[scope]]还原到正常函数定义时的[[scope]]
   等于是在正常函数定义时的[[scope]]添加了一个new Object到最前面

   在不同浏览器中对具名函数表达式的处理方式都太一样，都没太按ECMAScript中的规定去实现
   ECMAScript中关于具名函数表达式实现的规定大致如下：
   1、创建一个new Object
   2、将这个new Object插入到scope chain
   3、创建一个new Function，将scope chain设为[[scope]]
   4、为new Object添加一个属性，function name:function body（readOnly、don't Delete）
   5、移除new Object
   6、返回Function

<script type="text/javascript">var test="wrong"Object.prototype.test="right";var f = function(){    alert(test);}f();/*   正常函数申明运行时的作用域链   call Object   [[scope]]*/var f1 = function f0(){    alert(test);}f1();/*   具名函数表达式运行时的作用域链   call Object   new Object   [[scope]]*/</script>

<button id="button_1">1</button><button id="button_2">2</button><button id="button_3">3</button><script type="text/javascript">var i = 100;/*eval使用当前函数的闭包*/function x(){    var i = 0;    eval('i = "hello x"');}x();alert(i);//100/*eval使用全局闭包*/function y(){    var i = 0;    try{        window.execScript('i = "hello y"');    }catch(e){        window.eval('i = "hello y"');    }}y();alert(i);//hello y,except Safari/*   eval不能直接得到一个直接量的对象   因為eval将{}当成了复合语句标识*/alert(eval('{name:"MyName"}'));//MyName/*   复合语句是用逗号运算符将几个语句联合起来，用花括号括起来，形成一个语句块(statement block)。   复合语句允许使用标签，但只允许出现一个，并且出现在整段语句的最开始位置*/name:{"MyName",alert('2'),alert('3')}/*   我们要做的是改变花括号{}在eval中的意义，使它成为一个表达式或值*///通过表达式运算符()，将{name:"MyName"}返回为一个值；alert(eval('({name:"MyName"})'));//我们也构造了一个复合语句，使得{name:"MyName"}成为这个复合语句里的一个表达式；alert(eval('{0,{name:"MyName"}}'));//可以进一步简化为连续表达式；alert(eval('0,{name:"MyName"}'));/*with与闭包的等同性 月MM*/function abc() {    var aArr = new Array('button_1', 'button_2', 'button_3');    for (var i=0; i<3; i++) {        with({i:i}){            document.getElementById(aArr[i]).onclick= function(){                alert('当前你点击的是button_'+(i+1));            }        }    }}abc();</script>