欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 变量和函数提升问题总结

程序员文章站 2022-09-26 17:14:31
一 什么是JavaScript 变量提升? -- JS程序运行时, (a)变量的声明会被解释器"提升"到方法体内的顶部,初始化赋值操作不提升按顺序执行 (b)函数体内未声明的变量,解释器会在函数体外声明变量,成为全局变量 (c)声明过的函数,整个函数体会被解释器提升到方法体的顶部,初始化赋值操作按顺 ......

一 什么是JavaScript 变量提升?

-- JS程序运行时,

(a)变量的声明会被解释器"提升"到方法体内的顶部,初始化赋值操作不提升按顺序执行

(b)函数体内未声明的变量,解释器会在函数体外声明变量,成为全局变量

(c)声明过的函数,整个函数体会被解释器提升到方法体的顶部,初始化赋值操作按顺序执行

1-1 变量提升

eg:变量的声明提升,初始化赋值不提升。

<script>
    console.log(a);    // undefined
    var a=3;           // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    function fn() { 
      console.log(a);  // undefined  
      var a = 'a';   //此a为局部变量,没有这一句上下输出的结果都变为3
      console.log(a);  // a
    }
    fn();
    console.log(a);    // 3
</script>

上述代码相当如下:

<body>
 <script>
    var a;
    console.log(a);    // undefined
    a=3;               // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    function fn() { 
      var a; 
      console.log(a);  // undefined  
      a = 'a';        //没有这一句上下输出的结果都变为3
      console.log(a);  // a
    }
    fn();
    console.log(a);  // 3
  </script>
</body>

对比改掉函数中a的var声明

<script>
    console.log(a);    // undefined
    var a=3;           // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    function fn() { 
      console.log(a);  //变成了 3  
      a = 'a';       //此a变成全局变量,没有这一句上下输出的结果都变为3
      console.log(a); // a
    }
    fn();
    console.log(a);  //变成了 a
</script>

上述代码相当如下:

 <script>
    console.log(a);    // undefined
    var a=3;           // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    var a;
    function fn() { 
      console.log(a);  // 3  
      a = 'a';        //没有这一句上下输出的结果都变为3
      console.log(a);  // a
    }
    fn();
    console.log(a);    // a
 </script>

ps:所以为避免调用函数后,可能修改了外部的变量,函数内的变量都要声明初始化,规范化。

1-2 函数提升

eg:声明式函数将整个函数体提升到顶部,字面量式函数只提升声明过的变量

<script>
    console.log(f1);         //function f1() {}
    console.log(f2);         //undefined
    function f1() {}
    var f2 = function () {}; //若没有var声明,上面结果报错f2 is not defined
    console.log(f2);         //function () {}
</script>

上述代码相当如下:

<script>
    function f1() {}         //提前
    var f2;                  //提前
    console.log(f1);         //function f1() {}
    console.log(f2);         //undefined
    f2 = function () {};     //若没有var声明,上面结果报错f2 is not defined
    console.log(f2);         //function () {}
</script>

ps:为避免出现一些意料不到的变量提升的错误,在每一个变量的作用域开始之前,声明并初始化变量,留意函数体中未声明的变量自动变成全局变量后,导致的种种情况