[Day5] 范围链

什麽是范围链(Scope Chain)

范围链是指当函式本身没有所需的变数时，会向外层寻找该变数，而范围链只取决於函式的作用域，与执行环境无关。

范围链的范例

下面 4 个例子，皆以程序的运作过程来撰写，当作复习昨天的执行环境与执行堆叠，但需要注意的是范围链只取决於函式的作用域，与执行环境无关，又因 JavaScript 是静态作用域的关系，在写下程序码时就已经决定作用域，所以当函式本身没有需要的变数时，会向外层寻找该变数

范例1：

• 进入全域执行环境，命名 变数 name 赋予值 Carol，呼叫 函式 fn2
• 进入 函式 fn2 执行环境，命名 变数 name 赋予值 Carol，呼叫 函式 fn1
• 进入 函式 fn1 执行环境，在 函式 fn1 需要 变数 name，在内层找不到，就会向外层 全域环境 中寻找 变数 name
• 离开 函式 fn1 执行环境
• 离开 函式 fn2 执行环境
• 离开 全域执行环境

var name = 'Carol';
function fn1() {
    console.log(name);
    // 范围链指向全域环境，故显示 Carol
}

function fn2() {
    var name = 'Marry';
    fn1();
}

fn2();

范例2：

• 进入全域执行环境，命名 变数 name 赋予值 Carol，呼叫 函式 fn1
• 进入 函式 fn1 执行环境，在函式内命名 变数 name 赋予值 Mary，呼叫 函式 fn2
• 进入 函式 fn2 执行环境，需要 变数 name，在函式内找到 变数 name，故显示 Casper。
• 离开 函式 fn2 执行环境
• 离开 函式 fn1 执行环境
• 离开 全域执行环境

var name = 'Carol';

function fn1() {
    var name = 'Marry';
    function fn2() {
        var name = 'Casper';
        console.log(name); // Casper
    }
    fn2();
}

fn1();

范例3：

• 进入全域执行环境，命名 变数 name 赋予值 Carol，呼叫 函式 fn1
• 进入 函式 fn1 执行环境，在函式内命名 变数 name 赋予值 Mary，呼叫 函式 fn2
• 进入 函式 fn2 执行环境，需要 变数 name，因在函式内找不到，向外层 函式 fn1 寻找，故显示 Marry。
• 离开 函式 fn2 执行环境
• 离开 函式 fn1 执行环境
• 离开 全域执行环境

var name = 'Carol';
function fn1() {
    var name = 'Marry';
    function fn2() {
        console.log(name); // Marry
    }
    fn2();
}

fn1();

范例4：

• 进入 全域执行环境，命名 变数 name 赋予值 Carol，呼叫 函式 fn1
• 进入 函式 fn1 执行环境，在函式内命名 变数 name 赋予值 Mary，呼叫 函式 fn2
• 进入 函式 fn2 执行环境，需要 变数 name，因在函式内找不到，向外层 函式 fn1 寻找，也找不到，再向外层 全域执行环境 中寻找，故显示 Carol。
• 离开 函式 fn2 执行环境
• 离开 函式 fn1 执行环境
• 离开 全域执行环境

var name = 'Carol';
function fn1() {
    function fn2() {
        console.log(name); // Carol
    }
    fn2();
}

fn1();

参考文献

六角学院 - JavaScript 核心篇

图片待补