1、作用域與作用域鏈

作用域

作用域是指程序源代碼中定義變量的區(qū)域。

作用域規(guī)定了如何查找變量，也就是確定當(dāng)前執(zhí)行代碼對(duì)變量的訪問權(quán)限。

JavaScript 采用詞法作用域(lexical scoping)，也就是靜態(tài)作用域。

靜態(tài)作用域與動(dòng)態(tài)作用域

因?yàn)?JavaScript 采用的是詞法作用域，函數(shù)的作用域在函數(shù)定義的時(shí)候就決定了。

而與詞法作用域相對(duì)的是動(dòng)態(tài)作用域，函數(shù)的作用域是在函數(shù)調(diào)用的時(shí)候才決定的。

讓我們認(rèn)真看個(gè)例子就能明白之間的區(qū)別：

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

// 結(jié)果是 ???

假設(shè)JavaScript采用靜態(tài)作用域，讓我們分析下執(zhí)行過程：

執(zhí)行 foo 函數(shù)，先從 foo 函數(shù)內(nèi)部查找是否有局部變量 value，如果沒有，就根據(jù)書寫的位置，查找上面一層的代碼，也就是 value 等于 1，所以結(jié)果會(huì)打印 1。

假設(shè)JavaScript采用動(dòng)態(tài)作用域，讓我們分析下執(zhí)行過程：

執(zhí)行 foo 函數(shù)，依然是從 foo 函數(shù)內(nèi)部查找是否有局部變量 value。如果沒有，就從調(diào)用函數(shù)的作用域，也就是 bar 函數(shù)內(nèi)部查找 value 變量，所以結(jié)果會(huì)打印 2。

前面我們已經(jīng)說了，JavaScript采用的是靜態(tài)作用域，所以這個(gè)例子的結(jié)果是 1。

這個(gè)文件也可以在github博客倉庫中找到。

思考題

最后，讓我們看一個(gè)《JavaScript權(quán)威指南》中的例子：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

猜猜兩段代碼各自的執(zhí)行結(jié)果是多少？

這里直接告訴大家結(jié)果，兩段代碼都會(huì)打印：local scope。

原因也很簡單，因?yàn)镴avaScript采用的是詞法作用域，函數(shù)的作用域基于函數(shù)創(chuàng)建的位置。

而引用《JavaScript權(quán)威指南》的回答就是：

JavaScript 函數(shù)的執(zhí)行用到了作用域鏈，這個(gè)作用域鏈?zhǔn)窃诤瘮?shù)定義的時(shí)候創(chuàng)建的。嵌套的函數(shù) f() 定義在這個(gè)作用域鏈里，其中的變量 scope 一定是局部變量，不管何時(shí)何地執(zhí)行函數(shù) f()，這種綁定在執(zhí)行 f() 時(shí)依然有效。

但是在這里真正想讓大家思考的是：

雖然兩段代碼執(zhí)行的結(jié)果一樣，但是兩段代碼究竟有哪些不同呢？

如果要回答這個(gè)問題，就要牽涉到很多的內(nèi)容，詞法作用域只是其中的一小部分，讓我們期待下一篇文章————《JavaScript深入之執(zhí)行上下文?！?。

2、JavaScript深入之執(zhí)行上下文

具體執(zhí)行分析

我們分析第一段代碼：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

執(zhí)行過程如下：

1.執(zhí)行全局代碼，創(chuàng)建全局執(zhí)行上下文，全局上下文被壓入執(zhí)行上下文棧

    ECStack = [
        globalContext
    ];

2.全局上下文初始化

    globalContext = {
        VO: [global, scope, checkscope],
        Scope: [globalContext.VO],
        this: globalContext.VO
    }

2.初始化的同時(shí)，checkscope 函數(shù)被創(chuàng)建，保存作用域鏈到函數(shù)的內(nèi)部屬性[[scope]]

    checkscope.[[scope]] = [
      globalContext.VO
    ];

3.執(zhí)行 checkscope 函數(shù)，創(chuàng)建 checkscope 函數(shù)執(zhí)行上下文，checkscope 函數(shù)執(zhí)行上下文被壓入執(zhí)行上下文棧

    ECStack = [
        checkscopeContext,
        globalContext
    ];

4.checkscope 函數(shù)執(zhí)行上下文初始化：

1. 復(fù)制函數(shù) [[scope]] 屬性創(chuàng)建作用域鏈，
2. 用 arguments 創(chuàng)建活動(dòng)對(duì)象，
3. 初始化活動(dòng)對(duì)象，即加入形參、函數(shù)聲明、變量聲明，
4. 將活動(dòng)對(duì)象壓入 checkscope 作用域鏈頂端。

同時(shí) f 函數(shù)被創(chuàng)建，保存作用域鏈到 f 函數(shù)的內(nèi)部屬性[[scope]]

    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope: undefined,
            f: reference to function f(){}
        },
        Scope: [AO, globalContext.VO],
        this: undefined
    }

5.執(zhí)行 f 函數(shù)，創(chuàng)建 f 函數(shù)執(zhí)行上下文，f 函數(shù)執(zhí)行上下文被壓入執(zhí)行上下文棧

    ECStack = [
        fContext,
        checkscopeContext,
        globalContext
    ];

6.f 函數(shù)執(zhí)行上下文初始化, 以下跟第 4 步相同：

1. 復(fù)制函數(shù) [[scope]] 屬性創(chuàng)建作用域鏈
2. 用 arguments 創(chuàng)建活動(dòng)對(duì)象
3. 初始化活動(dòng)對(duì)象，即加入形參、函數(shù)聲明、變量聲明
4. 將活動(dòng)對(duì)象壓入 f 作用域鏈頂端

    fContext = {
        AO: {
            arguments: {
                length: 0
            }
        },
        Scope: [AO, checkscopeContext.AO, globalContext.VO],
        this: undefined
    }

7.f 函數(shù)執(zhí)行，沿著作用域鏈查找 scope 值，返回 scope 值

8.f 函數(shù)執(zhí)行完畢，f 函數(shù)上下文從執(zhí)行上下文棧中彈出

    ECStack = [
        checkscopeContext,
        globalContext
    ];

9.checkscope 函數(shù)執(zhí)行完畢，checkscope 執(zhí)行上下文從執(zhí)行上下文棧中彈出

    ECStack = [
        globalContext
    ];