js中预解析引起的结果，深入分析

最近做笔试题好多涉及到js预解析问题，我老是掉到坑里今天决定彻底终结它！！！

 

首先我们要知道，JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程。

我们从下面几个问题入手：

1.什么是预解析？

我们都学过html，我们知道html是从上到下依次解析的。但是js不同它会在执行页面代码之前，会先把页面代码都扫描一遍，然后声明式的函数和变量都提到所在作用域的最前端，这就是js的预解析。

2.预解析的过程是怎样的？

这里涉及两个提升，一个是函数提升，一个是变量提升。

1）变量提升，把变量的声明提升到当前作用域的最上面，不包括变量的赋值。

2）函数提升，把函数的声明提升到当前作用域的最上面，不包括函数的调用。

3.提升需注意的点？

先提升var，在提升function。

 

入门级例子：

1.

　　console.log(a);  //a is not defined

这里报错，a未定义，想必是个人都知道。

2.

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

这里可能就有一些人模糊了，不是变量提升吗，怎么还undefined？？？

这就是你忽略了重要的一点：变量提升不包括变量的赋值

下面我们来演示一下它的预解析过程：

    var a;
    console.log(a);//这里的a仅仅只是声明了一下，并没有赋值，所以返回undefined
    a=5;

3.

        f1();
        function f1(){
            console.log('hello');//hello
        }

这个很简单了，预解析过程如下：

        function f1(){
            console.log('hello');
        }
        f1();

先声明函数在调用函数，之后输出结果。

 

走进门的例子：

1.

        var a = 25;
        function abc (){
        console.log(a);//undefined
        var a = 10;
        }
        abc();

这个可能大家又有一点懵了，函数内部也有变量外部也有不知道怎么分析了，别急，我们先预解析函数外面，在预解析函数里面：

        //函数外部预解析
        var a;
        function abc (){
            //函数内部预解析
            var a;
            console.log(a);//undefined
            a = 10;
        }
        a=25;
        abc();

不论是全局变量a，还是局部变量a，我们都在解析console.log(a);前都只是声明了a，并没有赋值，所以是undefined。

2.

        console.log(a);
        function a() {
        console.log('aaaaa');
        }
        var a = 1;
        console.log(a);

输出结果：

 

 

 看到这里大家又懵了。。。。。。。还是那句话先梳理预解析过程

        var a;
        function a() {
        console.log('aaaaa');
        }
        console.log(a);//这里输出了a（）函数
        a = 1;
        console.log(a);//这里输出了1

这里我们要铭记一点：

如果变量和函数同名的话，函数优先，所以第5行代码调用了函数a（）。

 

 

出门级例子：

1.

        var a = 18;
        f1();
        function f1() {
        　　var b = 9;
        　　console.log(a);
        　　console.log(b);
        　　var a = '123';
        }

输出结果：

 

 预解析过程：

        var a;
        function f1() {
            var b;
            var a;
            b = 9;
            console.log(a);
            console.log(b);
            a = '123';
        }
        a=18;
        f1();

到这里就可以一眼看出来了吧！！！

2.

        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }

结果：

 

 预解析过程：

        function f1() {
            var a ;
            a= b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        //这里我们要注意
        //var a=9;
        //b,c为全局变量
        //b=9;
        //c=9;
        console.log(c);
        console.log(b);
        console.log(a);

这里要注意下全局变量和局部变量问题！！！

 

好啦！现在相信大家已经懂得差不多了，自己在弄几个实例多测试一下哦！！

博客写的一般，如有疑问评论区见！如果有用就点个赞吧！

谢谢大家！