javascript预解析详解

1、定义

预解析:在当前作用域下，js运行之前，会把带有var和function关键字声明的变量先声明，并在内存中安排好。然后从上至下解析js语句。而且function的声明优先于var声明。

2、var声明

通过var声明的变量，进行预解析的时候：先声明变量，不管变量有没有赋值，声明时都赋值为undefined。

console.log(a);  //undefined
var a = 1;
console.log(b); //undefined
var b = function(){}

注意:
(1)同名的var声明和同名的函数声明，不管二者书写先后顺序，函数声明会覆盖掉var声明的变量;
(2)同名的var声明，后者会被忽略;
(3)同名的函数声明，后者会覆盖前面的

        console.log(a) //function a(){}
        var a = 10;
        console.log(a) //10
        var a = 20;
        console.log(a) //20
        var a = function  () {
            // body...
        }
        console.log(a) //function(){}
        function a(){}
        console.log(a)  //function(){}
        /*若在此处加下面的声明*/
        /*
        function a(name){this.name = name}
        */
        //则最上面的a输出:function a(name){this.name = name}

3、function声明

function进行预解析的时候，不仅是声明而且还定义了函数体，在内存中会开辟一块内存空间，存储的是函数体的字符串，不会执行。调用以后执行。

console.log(a) //function a(name){this.name = name}
function a(name){this.name = name}

注意:直接在函数后面加()，会报错。这样的函数声明时，先声明函数，然后声明(),这个()是匿名函数，声明会报错

function a(){}()  //报错

注意问题

(1)预解析，不会超出script标签

<script>
    console.log(a) // 报错
</script>
<script>function a(){}</script>

(2)后面script标签中可以访问呢前面script标签中的js,因为js是从上至下执行的

<script>
    function a(){}
    var a = 10
</script>
<script>
    console.log(a) //10
</script>

(3)匿名函数可以带名字，但是不等同于定义了一个函数

        console.log(a) //undefined
        fn()   //报错
        var a = function fn  (argument) {
            // body...
        }

(4)函数内部同名变量额声明高于传入的同名参数

var a = 10
function fn(a){
    var a = 20
    console.log(a)//20
}
fn(a)

var a = 10
function fn(a){
    console.log(a)//undefined
}
fn() //因为调用时，没有穿参数

(5) 函数内参数的声明高于外部同名变量的声明

    var a = 10
    function fn (a){
        console.log(a)//undefined
    }
    fn()

而

    var a = 10
    function fn (b){
        console.log(a) // 10
    }
    fn()

或者

    var a = 10
    function fn (){
        console.log(a) // 10
    }
    fn()