JavaScript预解析

JS是解释型语言，在运行前不需要编译，也就是边解释边执行，但是在执行之前有一个预处理的过程，以便在后续的执行过程中确定程序的上下文关系。（本人觉得这应该是设计语言的人，希望程序在执行时尽量不报错）

---

一. 预解析的对象是什么？

预解析是针对var声明的变量或函数，以及用function声明的函数，和函数定义时的形参，都会进行预先的声明并赋初值。

（1）对于var：
在处理用var声明的变量或函数时，会赋初值为undefined，尽管在声明时已经赋初值，但预解析阶段仍然是undefined，如下代码可看出：

console.log(a);   //undefined
var a = 10;

代码执行可分为两个阶段：

预解析： 在环境中发现var a，所以为a赋初值undefined;

执行阶段： 代码运行到console.log(a)，发现环境中存在var声明的变量a，但此时还未执行到a = 10，所以输出undefined

可以将代码理解为：

var a;
console.log(a);
a = 10;

（2）对于function：
在处理用function声明的函数时，会将函数的初值就赋为声明函数时的值，所以我们在一个函数的定义之前执行一个函数时不会报错：

func();  //hello js

function func(){
    console.log('hello js');
}

同样可以将函数的执行分为两个阶段：

预解析： 在环境中发现function func，所以为func赋初值 func = function func{ console.log(‘hello js’); };

执行阶段： 代码运行到func，发现环境中存在function声明的函数func，虽然此时还未执行到func的声明，但是在预解析阶段已经赋值，所以程序可以正确执行

（3）对于函数定义时的形参：
在定义一个函数时，如果定义了参数，则在预解析阶段会给形参赋值为undefined:

function func(name){
    console.log(name);
}
func(); //undefined

可以看出尽管在执行函数的时候并没有传参，但是程序也没有报错，这正是因为在预解析阶段对形参赋值为undefined；

二. 检验掌握程度的小例子：

关于上面的基本概念理解起来还是很容易的，但是在平时遇到一些复杂情况时，还是很迷糊的，所以加深理解还是很有必要的，所以通过下面的例子来强化一下吧：

小例子1：

if ('person' in window) {
   var person = 'luwenjing';
}
console.log(person);  //luwenjing

解释：熟悉Js的都知道，JS没有块级作用域，只有全局和函数作用域，所以if语句中的代码是属于全局作用域的，因此在进行'person' in window判断时，预解析阶段已经完成了对person=undefined的赋值，所以if语句返回true，并对person赋值，所以输出结果。

小例子2：

console.log( func );  //function func(){console.log('luwenjing')}
var func = 123;
console.log( func ); //123
function func() {
    console.log( 'luwenjing' );
}

解释：在这个题里面存在一个优先级的问题，用function定义的函数优先级最高，所以第一个输出就是函数本身；第二个输出var声明的变量的值，一旦变量被赋值，此时就会把同名函数覆盖。

小例子3：

function func (num) {
  console.log( num ); //123
  var num = 456;
  console.log( num ); //456
}
var num = 123;
func( num );
console.log( num ); //123

解释：在这个例子中，对func传参，首先输出123，这是也是因为优先级的问题，函数参数的优先级高于变量声明，后面这两个输出都很好理解，就不在赘述。

小例子4：

function funcvo(x, func){
    console.log(x, func); //第一个输出

    var x = 2;
    console.log(x, func); //第二个输出

    var func = function (){
        console.log(1);
    };
    console.log(x, func); //第三个输出

    function func(){
        console.log(2);
    }
    console.log(x, func); //第四个输出

    var func = function (){
        console.log(3);
    };
    console.log(x, func); //第五个输出
}

funcvo('luwenjing', function (){
    console.log(4);
});

结果如下：

//第一个输出
luwenjing function func(){
        console.log(2);
    }
//第二个输出
2 function func(){
        console.log(2);
    }
//第三个输出 
2 function (){
        console.log(1);
    }
//第四个输出 
2 function (){
        console.log(1);
    }
//第五个输出
2 function (){
        console.log(3);
    }

解释：其实这个题就和上面所说的优先级有关系，在代码预解析时，首先有function声明的函数的优先级最高，其次是函数的形参，最后是用var声明的变量，之后一旦发现var声明的变量或函数与用function声明的函数同名，var的声明就会覆盖function的声明。记住这个规则，类似的题目也就很容易理解了。

---

以上是本人对js代码预解析的理解，哪里不对，还请多多指教！