Js 變量聲明提升和函數聲明提升

Js代碼分為兩個階段：編譯階段和執行階段

Js代碼的編譯階段會找到所有的聲明，並用合適的作用域將它們關聯起來，這是詞法作用域的核心內容

包括變量聲明(var a)和函數聲明(function a(){})在內的所有聲明都會在代碼被執行前的編譯階段首先被處理

 

過程就好像變量聲明和函數聲明從他們代碼中出現的位置被移動到執行環境的頂部，這個過程就叫做提升

只有聲明操作會被提升，賦值和邏輯操作會被留在原地等待執行

 

變量聲明

Js編譯器會把變量聲明看成兩個部分分別是聲明操作(var a)和賦值操作(a=2)

聲明操作在編譯階段進行，聲明操作會被提升到執行環境的頂部，值是undefined(表示未初始化)

賦值操作會被留在原地等待執行階段

var a = 2;

function foo() {
    console.log(a); //undefined
    var a = 10;
    console.log(a); //10
}

foo();

// 相當於

var a = 2;

function foo() {
    var a;
    console.log(a); //undefined
    a = 10;
    console.log(a); //10
}

foo();

函數聲明

定義函數有兩種方式：函數聲明和函數表達式

函數聲明提升會在編譯階段把聲明和函數體整體都提前到執行環境頂部，所以我們可以在函數聲明之前調用這個函數

函數表達式，其實就是變量聲明的一種，聲明操作會被提升到執行環境頂部，並賦值undefined。賦值操作被留在原地等到執行。

// 函數聲明

foo(); //100

function foo(){
    console.log(100);
}

// 函數表達式
baz(); // TypeError: baz is not a function

var baz = function(){
    console.log(200);
}

//相當於

var baz;

baz();

baz = function() {
    console.log(200);
};

 

控制語句

Js中使用函數級作用域，不存在塊級作用域。所有普通塊中的聲明都會被提升到頂部，所以控制語句對聲明的控制就顯得完全沒有效果

if (false) {
    var a = 10;
}

console.log(a); //undefined

// 相當於

var a;
if (false) {
    a = 10;
}

console.log(a) //undefined

 

奇怪的函數聲明

console.log(a); //undefined

if (false) {
    function a() {
        console.log(100);
    }
}

a(); //TypeError: a is not a function 理論上應該是100

奇怪吧？？函數提升發生在所有代碼執行之前，所以盡管a函數的定義過程寫在了if分支中，但是理論上，它是不會影響函數聲明提升的

在新版本的瀏覽器中會出現此問題，舊版本的瀏覽器中會在控制台中打印出100

這也提醒了我們盡量不要在控制語句中進行聲明，會造成很多無法預知的bug

 

函數優先

提升操作會優先進行函數的聲明

函數會首先被提升然后才是變量，重復的變量聲明會被忽略，只剩下賦值操作，多個函數聲明可以進行覆蓋

聲明的順序是這樣的：

1. 找到所有的函數聲明，初始化函數體，如有同名的函數則會進行覆蓋

2. 查找變量聲明，初始化為undefined，如果已經存在同名的變量，就什么也不做直接略過

 

// 1
foo(); //200

function foo() {
    console.log(100);
}

function foo() {
    console.log(200);
}

// 2
console.log(foo); //function foo(){...}

function foo(){
    console.log(200);
}
var foo = 100;