JavaScript预解析的一些理解

曾经终败给现在 2024-04-17 05:55 61阅读 0赞

在理解预解析之前，我们首先要知道：

1.预解析指的是什么？

2.预解析可以帮助我们解决什么样的问题？

1.预解析指的就是，在js文件或者script里面的代码在正式开始执行之前，进行的一些解析工作。这个工作很简单，就是在全局中寻找var关键字声明的变量和通过function关键字声明的函数。

2.和作用域一样，预解析和作用域这些现象(或者说是概念的东西)，并不能因此使我们写出什么优秀的代码，但是能在开发的过程中，使我们理清思路，解答我们的困惑，对JS执行的过程更加的清晰和了解，对程序的运行更有把握，在面试和开发中也会更加的自如。

注意 ：

1.只有变量和函数才才会发生声明提升，并且变量在提升声明的时候不会赋值，默认值是undefined，函数声明也不会将函数调用。

2.通过声明提升，函数可以在声明的函数体之上进行调用，变量也可以在赋值之前进行输出，而不会报错，因为如果直接输出一个没有声明的变量会报错。

f1();              // 'hello'
     function f1() { 
     console.log('hello'); 
    }                   // 此时预解析函数 f1 声明提升, 所以上面的调用控制台中调用不会报错
    console.log(num);   // undefined  此时预解析变量 num 声明提升（没有赋值）
    var num = 5;        //  所以上面在控制台中调用不会报错，只是显示 undefined

**通过画图的方法可以很清楚知道预解析的发生过程.**

// 案例1
     var a = 25;
     function abc() {
       alert(a); 
       var a = 10;
     }
     abc();

![20180419225304473][]

相信大家通过上面画的这个图可以很清楚的看出这段代码预解析执行的过程。

// 案例二
    var color = "red";
       function outer() {
           var anotherColor = "blue";
           function inner() {
               var tmpColor = color;
               color = anotherColor;
               anotherColor = tmpColor;
               console.log(anotherColor);     // red
           }
           inner();
       }
       outer();
       console.log(color);                    // blue

![20180419225754811][]

// 案例三
    var name3 = "zs";
    function f3() {
        var name3 = "ls";
        function f4() {
            name3 = "ww";
        }
        f4();
        console.log(name3);   // ww
    }
    f3();
    console.log(name3);       // zs

![20180419225937789][]  
在这里我们能看的出来当最内部的函数没有使用**var**声明变量时候，会通过作用域链向上级的函数寻找该值，一旦在外层找到该值，就不会再向外寻找，所以笼统的说不加var声明的变量也不太准确，就像这种情况。

// 案例四
    function f1() {
       var a = b = c = 9;
      console.log(a);    // 9
      console.log(b);    // 9
      console.log(c);    // 9
    }
     f1();
     console.log(c);     // 9
     console.log(b);     // 9
     console.log(a);     // a is not defined

这里有一个坑相信大家已经看出来了。在声明多个变量的时候，运算符是逗号，如果是等号并不是集体声明。

[20180419225304473]: https://img-blog.csdn.net/20180419225304473
[20180419225754811]: https://img-blog.csdn.net/20180419225754811
[20180419225937789]: https://img-blog.csdn.net/20180419225937789