【前端筆記】【面試題】面試檢討

這段程式碼的結果是什麼，解釋執行過程

let hello = 'Jack';

const c = (hello) => {
  console.log(hello);
};

b();

function b() {
  hello = 'Bob';
  a(c);
}

function a(callback) {
  callback(hello);
  hello = 'James';
}

====== 解答防雷線 ======

執行過程：

1. 變數宣告：

• 先執行 let hello = 'Jack';，此時全域變數 hello 被賦值為 'Jack'。

2. 宣告函式 c：

• 宣告常數 c，並指派一個箭頭函式 (hello) => console.log(hello)，這個函式接收一個參數並將其輸出。

3. 呼叫 b() 函式：

• 進入 b() 函式內，第一行是 hello = 'Bob';，這個 b function 的作用域並沒有宣告 hello 變數，所以它會修改全域變數 hello 的值，將其改為 'Bob'。
• 接著呼叫 a(c)，將 c 作為 callback function 傳遞給 a。

4. 進入 a(callback)：

• callback(hello) 這行會執行 callback 函式，也就是 c 函式，並將當前的 hello 傳遞給它。此時，由於全域變數 hello 已經被 b 函式修改為 'Bob'，因此 callback(hello) 相當於執行 c('Bob')，這會印出 'Bob'。
• 這段有個觀念是 變數遮蔽（ variable shadowing），也就是在 c 函式內部，參數 hello 的值是 'Bob'，這個局部參數 hello 遮蔽 了全域作用域中的 hello，所以在 console.log(hello) 中，輸出的是傳遞進來的 'Bob'，而不是全域的 'Jack' 或 'James'。
• 然後 hello = 'James';，再次修改全域變數 hello 的值為 'James'，但這不會影響之前的結果。

這題主要是在考作用域。