JS學習--JS預解析

JS預解析

一、預解析的相關概念（ES5）

JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執行的。

JavaScript 解析器在運行 JavaScript 代碼的時候分爲兩步：

​ 預解析和代碼執行。

• 預解析：在當前作用域下, JS 代碼執行之前，瀏覽器會默認把帶有 var 和 function 聲明的變量在內存中進行提前聲明或者定義，預解析也叫做變量、函數提升。

• 代碼執行： 從上到下執行JS語句。

  注意：預解析會把變量和函數的聲明在代碼執行之前執行完成。

二、變量預解析

​ 變量的聲明會被提升到當前作用域的最上面，變量的賦值不會提升。

console.log(num);  // 結果是多少？
var num = 10;      // ？

結果：undefined
注意：變量提升只提升聲明，不提升賦值

三、函數預解析

​ 函數的聲明會被提升到當前作用域的最上面，但是不會調用函數。

fn();
function fn() {
    console.log('打印');
}

結果：控制檯打印字符串 — ”打印“

注意：函數聲明代表函數整體，所以函數提升後，函數名代表整個函數，但是函數並沒有被調用！

四、函數表達式聲明函數問題

函數表達式創建函數，會執行變量提升

fn();
var  fn = function() {
    console.log('想不到吧');
}

結果：報錯提示 ”fn is not a function"

解釋：該段代碼執行之前，會做變量聲明提升，fn在提升之後的值是undefined；而fn調用是在fn被賦值爲函數體之前，此時fn的值是undefined，所以無法正確調用

五、預解析案例：

案例1：

var num = 10;
fun();

function fun() {
    console.log(num);
    var num = 20;
}

輸出結果爲undefined.

相當於執行了以下操作:

var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();

案例二：

var num = 10;

function fn() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fn();

輸出結果爲undefined和20，相當於以下代碼：

var num;

function fn() {
    var num;
    console.log(num);
    num = 20;
    console.log(num);
}
num = 10;
fn();

案例三：

var a = 18;
f1();

function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}

輸出結果爲undefined和9，相當於以下代碼：

var a;

function f1() {
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 18;
f1();

案例四：

f1();
console.log(c);
console.log(b);
console.log(a);

function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

輸出結果爲：9 9 9 9 9 報錯
相當於以下代碼：

function f1() {
    var a;
    a = b = c = 9;
    // 相當於 var  a  = 9; b = 9; c = 9; b 和 c 直接賦值 沒有var 聲明 當 全局變量看
    // 集體聲明  var a = 9, b = 9, c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);