【JavaScript】範圍鏈 Scope Chain

🚩 範圍鏈

當他本身沒有這個變數的時候，
他就會像外層去尋找，
這個尋找的過程與執行環境沒有關係，
是依據函式文法本身來決定範圍鏈，
所以不管是 fn1 還是 fn2，
他的範圍鏈都是指向外層的全域。

圖片引用自六角學院: https://www.hexschool.com/

在尋找 value 這個變數時，
因為 fn1 裡面沒有，所以他會向外尋找。
但他在尋找時不會跟執行環境有關係，
不會因為是 fn2() 去呼叫 fn1()， 就去找 fn2() 的 value。
因為 JavaScript 是語法作用域，
他在程式碼撰寫時就已經確認作用域。

🚩 範例一程式碼

let myPokémon = '皮卡丘';
function callPokémon() {
　console.log('就決定是你了，' + myPokémon);
}
function battle() {
　let myPokémon = '閃電鳥';
　callPokémon();
}

第一小題

callPokémon();

解答在下面

↓

↓

↓

↓

↓

因為範圍鏈他會向外尋找變數，
所以結果會是 就決定是你了，皮卡丘 。

第二小題

battle();

解答在下面

↓

↓

↓

↓

↓

雖然 callPokémon() 的執行環境是在 battle()的裡面，
但執行環境不會影響到範圍鏈，
因此答案也會是 就決定是你了，皮卡丘 。

🚩 範例二程式碼

let myPokémon = '皮卡丘';
function battle() {
　let myPokémon = '閃電鳥';
　function sayHi() {
　　let myPokémon = '快龍';
　　console.log('你好哇~ ' + myPokémon);
　}
　sayHi();
}

第三小題

battle();

解答在下面

↓

↓

↓

↓

↓

因為 sayHi() 裡面有 myPokémon 的變數，
因此輸出結果就是 你好哇~ 快龍 。

🚩 範例三程式碼

let myPokémon = '皮卡丘';
function battle() {
　let myPokémon = '閃電鳥';
　function sayHi() {
　　//  let myPokémon = '快龍';
　　console.log('你好哇~ ' + myPokémon);
　}
　sayHi();
}

第四小題

battle();

解答在下面

↓

↓

↓

↓

↓

因為範圍鏈是向外尋找，
因此輸出結果就是 哈嘍~ 閃電鳥 。