读李战的悟透JavaScript的一点理解--深入了解预编译

向大师致敬！以前虽然看过，但是不求甚解，最近开始痛下苦功，有点收获。推荐李战的书 --悟透JavaScript

http://book.douban.com/subject/3271104/   豆瓣上的介绍

在javascript里的全局环境就是一个对象，这个对象是javascript运行环境的根。对于浏览器中的javascript来说，这个根对象就是我们熟知的window对象。对于全局的javascript语句来说，window对象就相当于当前作用域。
当我们写下：

var myname="leadzen" ; //就是定义了window作用域的一个变量myname,而当我们写下：
myname="lead_zen";    //就是定义了window对象的一个属性myname 

在这里，window作用域的一个变量 myname和window对象的一个属性myname几乎等价。

alert(window.myname1); //输出lead_zen
alert(window.myname); //输出leadzen
alert(myname); //输出leadzen

看另一个例子:

var yourname="真真";
myname="spring";
var interesting="laughing gor";
alert(myname + " like " + yourname);   //输出spring like 真真
changenames();     //直接调用函数，即使函数定义在后面。 函数预编译
function changenames() {
   alert('your old name is ' + yourname);  //输出 your old name is undefined ,因为var yourname，这样yourname赋值undefine
   alert('my old name is ' + myname);     //输出my old name is spring 因为myname是window新添加的一个属性。原型链的问题
                                          //虽然后面有句重设值的语句，但是，还没执行到，所以取全局的值
   //这说明在函数体内也有预编译，对于var定义的变量，会先定义，即使先使用了该变量,也不会报错，只是该值是undefined而已
   alert('interesting ' + interesting);  //输出interesting laughing gor,这说明查找全局作用域(上层作用域) 
                                         //上面两个例子说明，全局变量，无论有无var定义，在函数内都能读取
   alert('perporty of window name' + name );  //向上追溯的问题。最终找到window.name属性，这个为空。所以没有输出
   var yourname = "海琴";
   myname="小莫";                         //全局变量，重设了该值
   alert(myname + " do like " + yourname); //输出小莫 do like 海琴 ,这说明yourname被赋值了
}
alert(myname + " like " + yourname);   //输出小莫 like 真真   海琴只是函数changenames的一个私有变量
alert(window.interesting);             //输出laughing gor,说明全局变量定义是添加或修改了window属性

 这里涉及到函数预编译
       当代码运行进入一个函数时，javascript会创建一个新的作用域，来作为当前作用域的子作用域。然后，将当前全局作用域切换为这个新建的子作用域，开始执行函数逻辑。javascript执行引擎会把此函数内的逻辑代码，当一个代码段单元来分析和执行。       在第一步的预编译分析中，javascript执行引擎将所有定义式函数直接创建为作用域上的函数变量，并将其值初始化为定义的函数代码逻辑，也就是为其建立了可调用的函数变量。而对于所有"var"定义的变量，也会在第一步的预编译中创建起来，并将初始值设为undefined。
看一个特别的例子

function changenames() {
   var yourname = "海琴";
   myname="小莫";                       
}
alert(myname);   //直接报错,为什么呢？因为预编译只是在该函数内有效
//alert(yourname);   //报错，也是同样道理

但是,

function changenames() {
   var yourname = "海琴";
   myname="小莫";                       
}
changenames();
alert(myname);  //输出小莫,因为函数已经执行了,myname是全局变量了，所以，能输出该变量的值

alert(yourname);  //报错，因为yourname是函数体内的私有变量，所以，无法读取。

 随后，javascript开始解释执行代码。当遇到对函数名或变量名的使用时，javascript执行引擎会首先在当前作用域查找函数或变量，如果没有就到上层作用域查找，依次类推。

  因此，用"var"定义的变量只对本作用域有效，尽管此时上层作用域有同名的东西，都与本作用域的"var"变量无关。退出本作用域之后，此"var"消失，回到原来的作用域，该有啥就还有啥，该是谁就还是谁。

额外的思考

            var aa = "dd";
           //aa="dd";
                function bb() {
                    alert(this.aa);    //输出dd，而不是undefined 
                     alert(aa); 
                    var aa = "cc";
                   alert(aa);
                }
                bb();  //输出dd、undefined、cc，即使第一句没有var,aa="dd";调用该函数时，还是输出dd、undefined、cc
                       //这里强调的是this，this指谁呢？window对象 。
          //alert(window.aa);  //输出dd

网上的例子：

   var x = 1, y = z = 0;  
   function add(n) {  
       n = n+1;  
　 }  
  
   y = add(x);  
     
   function add(n) {  
      n = n + 3;  
   }  
  
   z = add(x);  

执行完毕后 x, y, z 的值分别是多少？ 仔细看的人马上就知道了， x, y 和 z 分别是 1, undefined 和 undefined。 因为调用函数后，没有返回值过来

还一个例子：

<script>  
   alert(typeof addA);  
   addA();  
   function addA() {  
      alert("A executed!");  
   };  
</script>  
<script>  
   alert(typeof addB);  
   addB();    //为什么会是报错呢，因为addB是undefined,如果，var addB ...放在addB()前，那结果正常。
              //也就是预编译的值都是undefined的，你如果执行/调用，肯定报错
   var addB = function() {  
     alert("B executed!");  
   };  
</script> 

第一个 <script> 块执行正常，结果就是弹出 "function" 和 "A executed!" 的对话框。 
那么第二个 <script> 块呢？ 执行结果是弹出 "undefined" 的对话框后报 JS 错误，说 addB 不是一个 function。 有点出乎意料？呵呵，其实第一个 script 块中的 addA 一句是函数声明，当然进行了"预编译"，但是第二个 script 块中的 addB 一句并非函数声明。只不过在执行这段 <script> 之前对变量进行了"预声明"，因此一开始变量addB是存在的，只不过是 undefined 的,调用肯定会出错。

将题目再变化下，如下 

   alert(typeof addB);  
   addB();  
   var addB = function addB() {  
     alert("B executed!");  
   };  

将正常输出 ，结果就是弹出 "function" 和 "B executed!" 的对话框。

再变化一下：

  alert(typeof addB);  
   var addB = "variable";  
   function addB() {  
       alert("function addB");  
   }  
   alert(addB); 

执行结果是"function"和"variable"。 
JS解析器先预定义了 addB 变量为 undefined, 但是 addB 函数覆盖了此变量，因此一开始执行结果是 function，然后 addB 被赋值为 "variable"，因此最后执行结果是 "variable"，上面的代码即使变为 

 alert(typeof addB);  
   function addB() {  
       alert("function addB");  
   }  
   var addB = "variable";  
   alert(addB); 

这说明JS解析器先预声明变量，再预定义函数。