首页 > > 网页制作 > Javascript >

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

2018-06-24 02:07:36来源：未知阅读 ()

一　什么是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>