JS 會有變數提升和函式提升

喆星高照發表於2022-06-29
JS變數函式

       JavaScript變數函式宣告提升（Hoisting）是在 Javascript 中執行上下文工作方式的一種認識（也可以說是一種預編譯），從字面意義上看，“變數提升”意味著變數和函式的宣告會在物理層面移動到程式碼的最前面，在程式碼裡的位置是不會動的，而是在編譯階段被放入記憶體中會和程式碼順序不一樣。變數函式宣告提升雖然對於實際編碼影響不大，特別是現在ES6的普及，但作為前端算是一個基礎知識，必須掌握的，是很多大廠的前端面試必問的知識點之一。在這裡分享，不是什麼新鮮的內容，只是作為一個自己的學習筆記，加速對其的理解。

變數知道是ES5中的 var 和 function 中的產物，ES6中的 let 、 const 則不存在有變數提升。

變數提升

JavaScript引擎的工作方式是先解析程式碼，獲取所有宣告的變數和函式，然後再一行一行地執行。這造成的結果，就是所有的變數的宣告語句，都會被提升到程式碼的頭部，這就叫做變數提升（Hoisting）。

這裡說的變數宣告，包括函式的宣告，接下來看看程式碼：

function hoistingVariable() {
    if (!devpoint) {
        var devpoint = 1;
    }

    console.log(devpoint);
}

hoistingVariable();

// 下面是輸出結果
// 1

變數所處的作用域為函式體內，解析的時候查詢該作用域中的宣告的變數，devpoint在if雖然未宣告，根據變數提升規則，變數的宣告提升到函式的第一行，但未賦值。實際的效果等同於下面的程式碼：

function hoistingVariable() {
    var devpoint;
    if (!devpoint) {
        devpoint = 1;
    }
    console.log(devpoint);
}
hoistingVariable();

接下再增加一些迷惑的程式碼，如下：

var devpoint = "out";
function hoistingVariable() {
    var devpoint;
    if (!devpoint) {
        devpoint = "in";
    }
    console.log(devpoint);
}
hoistingVariable();
console.log(devpoint);

// 下面是輸出結果
// in
// out

對於同名變數宣告，個人理解是先找作用域，就近原則，函式體內宣告（前提是有宣告 var ），就只找函式內查詢，並不受函式外宣告的影響。

把上面函式體內的宣告語句去掉，輸出情況也就不一樣。

var devpoint = "out";
function hoistingVariable() {
    if (!devpoint) {
        devpoint = "in";
    }
    console.log(devpoint);
}
hoistingVariable();
console.log(devpoint);

// 下面是輸出結果
// out
// out

函式體內宣告語句去掉後，這是就需要去函式體外找宣告，根據這一條，函式外宣告並賦值了，函式體內的 if 語句就不會執行。

下面程式碼調整了賦值的順序，程式碼如下：

var devpoint;
function hoistingVariable() {
    if (!devpoint) {
        devpoint = "in";
    }
    console.log(devpoint);
}
devpoint = "out";
hoistingVariable();
console.log(devpoint);

// 下面是輸出結果
// out
// out

根據上面說的，函式體內的變數是外部宣告的，但未賦值，函式是提升了，併為執行。在函式執行前賦值給devpoint，再執行就變成了out。

函式提升

上面介紹過，變數提升，同樣包括函式的宣告，不同方式的函式宣告，執行也有所不同。這種問題就是直接上程式碼。

function hoistingFun() {
    hello();
    function hello() {
        console.log("hello");
    }
}
hoistingFun();

// 下面是輸出結果
// hello

上面的程式碼能夠正常執行是因為函式宣告被提升，函式 hello 被提升到頂部，執行效果跟下面程式碼一致：

function hoistingFun() {
    function hello() {
        console.log("hello");
    }
    hello();
}
hoistingFun();

// 下面是輸出結果
// hello

如果在同一個作用域中對同一個函式進行宣告，後面的函式會覆蓋前面的函式宣告。

function hoistingFun() {
    hello();
    function hello() {
        console.log("hello");
    }

    function hello() {
        console.log("hello2");
    }
}
hoistingFun();

// 下面是輸出結果
// hello2

兩個函式宣告都被提升了，按照宣告的順序，後面的宣告覆蓋前面的宣告。

函式宣告常見的方式有兩種，還有一種是匿名函式表示式宣告方式，這種方式可以視為是變數的宣告來處理，當作用域中有函式宣告和變數宣告時，函式宣告的優先順序最高，將上面的程式碼更改後，結果就不一樣了，如下：

function hoistingFun() {
    hello();
    function hello() {
        console.log("hello");
    }

    var hello = function () {
        console.log("hello2");
    };
}
hoistingFun();

// 下面是輸出結果
// hello

上面的程式碼，編譯邏輯如下：

function hoistingFun() {
    function hello() {
        console.log("hello");
    }
    hello();

    hello = function () {
        console.log("hello2");
    };
}
hoistingFun();

// 下面是輸出結果
// hello

接下來再來看下，外部使用變數宣告，函式體內使用函式宣告的示例：

var hello = 520;

function hoistingFun() {
    console.log(hello);

    hello = 521;
    console.log(hello);
    function hello() {
        console.log("hello");
    }
}
hoistingFun();
console.log(hello);
// 下面是輸出結果
// [Function: hello]
// 521
// 520

上面說過，在函式體內宣告過的變數或者函式，只作用於函式體內，受限於函式體內，不受外部宣告的影響，相當於函式體內作用域與外部隔離。上面程式碼的編譯後的邏輯如下：

var hello = 520;

function hoistingFun() {
    function hello() {
        console.log("hello");
    }
    console.log(hello);

    hello = 521;
    console.log(hello);
}
hoistingFun();
console.log(hello);
在變數宣告中，函式的優先權最高，永遠提升到作用域最頂部，然後才是函式表示式和變數的執行順序。

來看下面的程式碼：

var hello = 520;
function hello() {
    console.log("hello");
}
console.log(hello);
// 下面是輸出結果
// 520

根據函式宣告優先順序最高的原則，上面程式碼的執行邏輯如下：

function hello() {
    console.log("hello");
}
hello = 520;
console.log(hello);

為什麼要提升？

至於為什麼要提升，這裡不做詳細介紹，提供一些參考文章，有興趣的可以去查閱

最佳實踐

現代JavaScript中，已經有很多方式避免變數提升帶來的問題，使用let、const替代var，使用eslint等工具避免變數重複定義，在一些前端開發團隊中，可以針對團隊做一些規範化的腳手架，如專案初始化強制專案的目錄、eslint的最佳配置等，用程式規範的過程比人督促要靠譜。

下面的程式碼可以看到const 和 var 宣告的變數的區別，const 宣告的變數不會提升，具體的區別可以查閱《細說javascript中變數宣告var、let、const的區別》

console.log("1a", myTitle1);
if (1) {
    console.log("1b", myTitle1);
    var myTitle1 = "devpoint";
}
if (1) {  // 這裡的程式碼是有錯誤無法執行
    console.log("3c", myTitle2);
    const myTitle2 = "devpoint";
}
// 下面是輸出結果
// 1a undefined
// 1b undefined

總結

通過自我學習變數函式提升，加深了對其理解，對於前端面試所涉及的類似問題可以自信的給出答案，算是一種收穫。

相關文章