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; 股票代碼https://www.gendan5.com/topic/lcSearch.html

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 相當于定義了一個全局變量。