【前端基础篇】JavaScript 预解析_前端函数的预解析-优快云博客

本文详细探讨了JavaScript中的预解析现象，包括变量声明与函数声明的提升机制，以及在代码执行过程中如何避免预解析带来的潜在问题。通过多个实例，展示了预解析如何影响代码的行为，并解释了变量与函数声明在预解析过程中的不同处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预解析：在JavaScript中如果代码书写规范，则不需要考虑预解析问题；而预解析则是将变量声明和函数声明放在最前面，对于变量的赋值则不会提前。下面具体分析预解析的几种情况：

①

<script>
//举例1：
      console.log(a); //在这里JS运行中不会报错，会输出undefined
      var a = 1;
      console.log(a); //输出结果为1

      //举例1预解析过后的代码：
      var a; //变量的声明提前
      console.log(a);
      a = 1; //变量的赋值不提前
      console.log(a);
</script>

②

<script>
//举例2：
      console.log(getMax()); //放在函数前进行调用也不会报错
      function getMax() {
        var arr = [1, 2, 3, 4, 5];
        var max = arr[0];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] > max) {
            max = arr[i];
          }
        }
        return max;
      }
</script>

③ 如果同时有两个同名的函数呢？

<script>
      console.log(getMax()); //放在函数前进行调用也不会报错,输出结果为10
      function getMax() {
        var arr = [1, 2, 3, 4, 5];
        var max = arr[0];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] > max) {
            max = arr[i];
          }
        }
        return max;
      }
      function getMax() {
        var arr = [1, 2, 3, 6, 10];
        var max = arr[0];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] > max) {
            max = arr[i];
          }
        }
        return max;
      }
    </script>

④ 再来点“senior”，其实也是“confused”...

<script>
      //如果变量和函数重名，则函数声明更为重要。
      console.log(typeof a);
      function a() {
        //这里不再书写函数体内容...
      }
      var a = 1;
      //但是如果下面还有console.log()语句的话...
      console.log(typeof a);
</script>

运行结果：