作者：前端小混混 來源：前端先鋒
在執(zhí)行JAVAScript代碼之前，js引擎首先會對其進(jìn)行解析和編譯。在編譯階段，變量和函數(shù)聲明被放入內(nèi)存，這被稱為提升(hoisting)。
需要注意的是，聲明只是被提升，而不是被初始化，這意味著如果一個變量在使用后被聲明并初始化，則不會初始化它的值。
function
使用 function 聲明時，可以在定義之前調(diào)用這個函數(shù)，它會按預(yù)期正常工作。例如：
hello(); // 輸出 'Hello world!'
function hello() {
console.log('Hello world!');
}
hello(); // 輸出 'Hello world!'
在上面的例子中， function 聲明被提升到其作用域的頂部，并且由于函數(shù)聲明的性質(zhì)，在聲明之前就可用。不過這是函數(shù)提升行為的唯一案例。
var
另一方面，var 聲明的行為有所不同，在其初始化之前進(jìn)行訪問會返回 undefined。例如：
console.log(x); // 輸出 'undefined'
f(); // 拋出異常：'Uncaught TypeError: f is not a function'
var x = 1;
var f = () => 'Hi!';
console.log(x); // 輸出 '1'
f(); // 返回 'Hi!'
正如你在這個例子中所看到的，var 聲明被提升到它作用域的頂部，但是變量的值只有在初始化代碼被執(zhí)行時才會初始化，所以在初始化這行代碼之前是 undefined。
const 和 let
const 和 let 聲明被提升，但它們沒有被初始化為 undefined。而是會給你一個錯誤，這也是 class 聲明的行為方式。例如：
console.log(y); // 拋出異常： 'Uncaught ReferenceError: Cannot access "y" before initialization'
g(); // 拋出異常： 'Uncaught ReferenceError: Cannot access "g" before initialization'
let y = 2;
const g = () => 'Hey!';
console.log(y); // 輸出 '2'
f(); // 返回 'Hey!'
一般情況下，在初始化之前訪問用 var 聲明的變量會默默地失敗，對 const 或 let做同樣的事情會導(dǎo)致一個清晰的、易于調(diào)試的錯誤。
總結(jié)
- 在使用變量、函數(shù)、對象和類之前，務(wù)必要先定義它們。ESLint 可能可以幫你解決這個問題。
- 在項目中要盡可能的使用 const 和 let，而不是 var 。這樣可以減少很多麻煩。
- 如果可能的話，只使用箭頭函數(shù)或 function 聲明。一致性有助于減少混亂。
