JavaScript - 预编译

JavaScript 是一门脚本语言,其可以不经过编译而直接运行(这点与 Java 不同,Java 需要编译之后才能运行),但是 JavaScript 存在一个预编译的问题。

预编译


  1. JavaScript 脚本的运行由两个阶段组成:预编译阶段执行阶段,先进行预编译,再执行语句;
  2. 预编译,简单理解,就是在内存中开辟一块空间,用来存放变量和函数。在 JavaScript 中,JavaScript 会在内存中为使用 <code>var</code> 关键字声明的变量和使用 <code>function</code> 关键字声明的函数开辟一块空间,用来存放使用这两者声明的变量和函数;
  3. 在预编译时,<code>function</code> 的优先级比 <code>var</code> 高,如:
function a(){};
var a = 1;

此时 <code>a</code> 的类型是 <code>function</code>,而不是 <code>number</code>;

  1. 注意:预编译时并不会对变量进行赋值(即不会进行初始化),变量赋值是在 JavaScript 脚本执行阶段进行的。

下面我们通过一些例子来理解预编译。

实例1


代码:

<script>
    console.log('before: ' + a); // ①
    var a = 1;                   // ②
    console.log('after: ' + a);  // ③
</script>

效果演示:

实例1.png

结果分析:

  1. JavaScript 脚本在执行之前先进行预编译,所以 ① 和 ③ 不会执行,而是先执行 ②,进行预编译;
  2. 因为预编译阶段是不对变量进行赋值的,即不进行初始化,所以 ② 也只执行前半部分 <code>var a;</code>,由于只声明了 <code>a</code> 而没有进行赋值,所以此时 <code>a</code> 的值为 <code>undefined</code>;
  3. 预编译完毕之后,JavaScript 脚本开始执行,执行顺序按照从上到下的顺序执行。
    所以,上面的代码可以拆分成下面的样子:
<script>
    console.log('before: ' + a); // ①
    var a;                       // ②
    a = 1;                       // ③
    console.log('after: ' + a);  // ④
</script>

首先进行预编译,先执行 ②,之后预编译结束,按照从上到下的顺序依次执行 ① -> ③ -> ④,执行 ① 的时候,由于此时 <code>a</code> 并未进行赋值,其默认的值为 <code>undefined</code>,所以输出 <code>before: undefined</code>,之后执行 ③,对 <code>a</code> 进行赋值,此时 <code>a = 1</code>,最后执行 ④,输出 <code>after: 1</code>。

实例2


代码:

<script>
    a();                        // ①
    console.log(a);             // ②
    function a(){               // ③
        console.log('function');// ④
    }                           // ⑤
    console.log(a);             // ⑥
    a();                        // ⑦
</script>

效果演示:

实例2.png

结果分析:
上面的代码中我们声明了一个函数 <code>a()</code>,按照前面说的,在 JavaScript 脚本执行之前会先进行预编译,所以函数 <code>a()</code> 会被预编译,之后再执行 JavaScript 语句,① 为执行函数 <code>a()</code>,② 为在控制台输出函数 <code>a()</code>。

实例3


代码:

<script>
    a();                    // ①
    function a(){           // ②
        console.log('a');   // ③
    }                       // ④
    var a = 1;              // ⑤
    a();                    // ⑥
</script>

效果演示:

实例3.png

结果分析:

  1. 预编译阶段:②③④ 和 ⑤ 的前半部分 <code>var a;</code> 执行,由于 <code>function</code> 优先级比 <code>var</code> 高,所以预编译结束之后 <code>a</code> 的类型为 <code>function</code>;
  2. 执行阶段:按顺序从上往下执行,首先执行 ①,此时 <code>a</code> 的类型为 <code>function</code>,执行没问题;然后把 <code>1</code> 赋值给 <code>a</code>,由于 JavaScript 是弱类型语言,此时 <code>a</code> 的类型为 <code>number</code>,之后再执行函数 <code>a()</code>,会出现错误:Uncaught TypeError: a is not a function,因为 <code>a</code> 此时本质上是一个变量,而不是函数。

实例4


代码:

<script>
    b();                    // ①
    var b = function () {   // ②
        console.log('b');   // ③
    };                      // ④
    b();                    // ⑤
</script>

效果演示:

实例4.png

结果分析:

  1. 预编译阶段:执行 ② 的前半部分 <code>var b;</code>,此时 <code>b</code> 为变量,其值为 <code>undefined</code>(注意:此阶段并不会将匿名函数赋值给 <code>b</code>,赋值在执行阶段才进行);
  2. 执行阶段:首先执行 ①,由于 <code>b</code> 的类型为变量,而不是 <code>function</code>,所以会报错:预编译.html:9 Uncaught TypeError: b is not a function,此时程序出错,不再往下执行;
  3. 将 ① 屏蔽,再次运行脚本,预编译阶段还是一样,执行阶段:将一个匿名函数赋值给变量 <code>b</code>,此时 <code>b</code> 的类型为 <code>function</code>,再执行 <code>b()</code>,控制台正常输出 <code>b</code>。

实例5


代码:

<script>
    function c() {          // ①
        console.log('c1');  // ②
    }                       // ③
    c();                    // ④
    function c() {          // ⑤
        console.log('c2');  // ⑥
    }                       // ⑦
</script>

效果演示:

实例5.png

结果分析:

  1. 预编译阶段:先执行 ①②③ 和 ⑤⑥⑦,由于 ⑤⑥⑦ 声明的函数与 ①②③ 声明的函数同名,所以后声明的函数会覆盖掉之前声明的函数;
  2. 执行阶段:执行 ④,由于前面所说,所以在控制台会输出 <code>c2</code>。

总结


总之,要理解预编译,只要弄清两点:变量/函数声明变量赋值。在预编译阶段,只进行 变量/函数声明,不会进行变量的初始化(即变量赋值,所有变量的值都是 <code>undefined</code>);变量赋值 是在执行阶段才进行的。

推荐阅读更多精彩内容