JS 語法作用域(Lexical scope)

常常聽到 JavaScript 的語法作用域和其它語言有些不同，主要是 JavaScript 是屬於使用「靜態作用域」的語言，那什麼又是「靜態作用域」呢？

簡單來說，「靜態作用域」就是變數的作用域在被解析時，就已經確定了作用域，且不會再改變。有靜態就有動態，而「動態作用域」又是什麼？
「動態作用域」是變數的作用域，在調用函式的時候才決定。

靜態作用域，是在 語法解析的時候，就已經確定了。
動態作用域，是在函式被調用呼叫的時候才決定的。

function callName() {
  let moi = 'Tsuifei';
  console.log(moi);
}
callName(); // Tsuifei

在function裡的變數因為被函式包住，所以是區域變數，而在函式最外層的則是全域變數，所以在上面這段程式中，我們呼叫了callName()這個函式，再進去一行行執行函式內，當我們要它印出moi時，他會先去上面（已經讀到的）找，這時會找到let moi = 'Tsuifei';而把'Tsuifei'印出來。

但是如果函式裡面找不到moi，又要在函式裡面印出moi呢？因為moi這個變數是在callName()這個函式被定義的，所以它的作用域就會在這個函式裡。

function callName() {
  let moi = 'Tsuifei';
}
callName(); //
console.log(moi);

let moi = 'Philippe';
function callName() {
  let moi = 'Tsuifei';
  console.log('內：' + moi);
}
console.log('外：' + moi);
callName();
// 外：Philippe
// 內：Tsuifei

參考：
Javascript 進階 2-3 語法作用域(Lexical scope) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天