在執行JavaScript代碼之前，js引擎首先會對其進行解析和編譯。在編譯階段，變量和函數聲明被放入內存，這被稱為提升(hoisting)。

需要注意的是，聲明只是被提升，而不是被初始化，這意味著如果一個變量在使用后被聲明并初始化，則不會初始化它的值。

[[403683]]

function

使用 function 聲明時，可以在定義之前調用這個函數，它會按預期正常工作。例如：

hello(); // 輸出 'Hello world!' 
 
function hello() { 
  console.log('Hello world!'); 
} 
 
hello(); // 輸出 'Hello world!' 

在上面的例子中， function 聲明被提升到其作用域的頂部，并且由于函數聲明的性質，在聲明之前就可用。不過這是函數提升行為的唯一案例。

var

另一方面，var 聲明的行為有所不同，在其初始化之前進行訪問會返回 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 聲明被提升到它作用域的頂部，但是變量的值只有在初始化代碼被執行時才會初始化，所以在初始化這行代碼之前是 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做同樣的事情會導致一個清晰的、易于調試的錯誤。

總結

• 在使用變量、函數、對象和類之前，務必要先定義它們。ESLint 可能可以幫你解決這個問題。
• 在項目中要盡可能的使用 const 和 let，而不是 var 。這樣可以減少很多麻煩。
• 如果可能的話，只使用箭頭函數或 function 聲明。一致性有助于減少混亂。