【Day05】范围链(Scope Chain)

所谓的范围链是指当函式本身没有变数时，而向外层寻找变数的过程，

但寻找的过程和执行环境没有任何关系，而是跟作用域有关系

范例：

var person = 'mother';

function sayHi() {
    console.log(`hi ${person}`);
}

sayHi();

该范例会显示 'hi mother'，

因为 sayHi() 函式内没有 perosn 这个变数，

sayHi的范围链会指向全域，

所以会将全域的 person 的值代入函式中，

因此才会回传 'hi mother'

图解

再看一个范例

let person = 'mother';

function sayHi() {
    console.log(`hi ${person}`);
}

function doMorningWork() {
    let person = 'father';
    
    function meetAuntie() {
        let person = 'weiwei';
        console.log(`hello ${person}`);
    }
    
    sayHi();
    meetAuntie();
}

doMorningWork();

该范例会回传两个值分别为 'hi mother' 和 'hello weiwei'，

首先 doMorningWork() 的 sayHi() 里的 person 会指向全域，

而 meetAuntie() 因为函式内已经有宣告 person 变数，

所以会使用自己函式内部的变数

图解

最後一个范例，将 meetAuntie() 内宣告的变数拿掉

let person = 'mother';

function doMorningWork() {
    let person = 'father';
    function meetAuntie() {
        console.log(`hello ${person}`);
    }
    meetAuntie();
}

doMorningWork();

此时结果为 'hello father'，

在 meetAuntie() 的范围链会指向 doMorningWork()，

因为 meetAuntie() 没有 person 变数，

因此会向外层寻找，而此时的 meetAuntie() 外层为 doMorningWork()，

所以 person 的值会是 'father'

图解

此时如果将 doMorningWork() 宣告的 person 拿掉的话

let person = 'mother';

function doMorningWork() {
    function meetAuntie() {
        console.log(`hello ${person}`);
    }
    meetAuntie();
}

doMorningWork();

此时 meetAuntie() 的范围链就会指向全域，

因此回传结果为 'hello mother'