JavaScript預解析

坑

1Q ：未宣告變數，直接輸出會出現什麼結果？

console.log(num);

1A ：報錯：變數未被定義。

Uncaught ReferenceError: num is not defined

2Q ：在輸出變數後才宣告並賦值變數會出現什麼結果？ 1

console.log(num);

var num = 10;

2A ：顯示 undefined 。

undefined

3Q ：先呼叫函式，再定義函式會出現什麼結果？ 2

fn();

function fn() {

    console.log('Javier_Ji');

}3A ：正常顯示。

Javier_Ji

4Q ：先呼叫函式，再宣告函式表示式會出現什麼結果？ 3

fn();

var fn = function() {

    console.log('Javier_Ji');

4A ：錯誤： fn 不是函式。

Uncaught TypeError: fn is not a function

解釋

JavaScript 程式碼是由瀏覽器中的 JavaScript 解析器來執行的。 JavaScript 解析器在執行 JavaScript 程式碼的時候分為兩步：

預解析：js 引擎會把 js 裡面的所有的 var 以及 function 提升到當前作用域的最前面。

程式碼執行：按照程式碼書寫的順序從上往下執行。

預解析分為：變數預解析（變數提升）和函式預解析（函式提升）

變數提升：把所有的變數宣告提升到當前的作用域最前面，不提升賦值操作。

函式提升：把所有的函式宣告提升到當前的作用域最前面，不呼叫函式。

示例

下面的程式碼執行後會得到什麼結果？4

fn();

console.log(c);

console.log(b);

console.log(a);

function fn() {

    var a = b = c = 9;

    console.log(a);

    console.log(b);

    console.log(c);

}

執行後結果如下：

Uncaught ReferenceError: a is not defined

針對2Q 的解答

先預解析，相當於執行了如下程式碼：

var num; 股票程式碼

var num;   // 把變數宣告提升到當前作用域（本例中是全域性）最前面

console.log(num); // 執行後續的程式碼

num = 10;   // 賦值

針對3Q 的解答

先預解析，相當於執行了如下程式碼：

 

function() {

    console.log('Javier_Ji');

}     // 把函式宣告提升到當前作用域（本例中是全域性）最前面

fn();   // 執行後續的程式碼，函式被正常呼叫

針對4Q 的解答

先預解析，相當於執行了如下程式碼：

 

var fn;   // 把 var 宣告提升到當前作用域（本例中是全域性）最前面

fn();   // 執行後續的程式碼，由於函式還沒被定義，且 var fn; 語句定義的是變數，則會報錯， fn 不是函式

function() {

    console.log('Javier_Ji');

}     // 執行後續的程式碼

針對示例的解答

先預解析，相當於執行了如下程式碼：

function fn() {

    var a;    

    a = b = c = 9;

    console.log(a);

    console.log(b);

    console.log(c);

}

fn();

console.log(c);

console.log(b);

console.log(a);

        本例中的程式碼 var a = b = c = 9; 相當於先在函式內部定義變數 var a ，之後賦值 a = b = c = 9 ，由此可得，變數 a 的作用域是在 fn 函式內部，而 b 和 c 相當於定義了一個全域性變數。