摘要：正文執(zhí)行環(huán)境也稱為環(huán)境是中最為重要的一個(gè)概念。執(zhí)行環(huán)境定義了變量或函數(shù)有權(quán)訪問的其他數(shù)據(jù)，決定了它們各自的行為。簡(jiǎn)而言之，執(zhí)行環(huán)境是基于對(duì)象的，而作用域是基于函數(shù)的。

前述

在我們學(xué)習(xí)Javascript過程中，常常會(huì)遇到作用域（Scope）和執(zhí)行上下文（Context）等概念。其中，執(zhí)行上下文與this關(guān)鍵字的關(guān)系密切。

有面向?qū)ο缶幊探?jīng)驗(yàn)的各位，對(duì)于this關(guān)鍵字再熟悉不過了，因此我們很容易地把它和面向?qū)ο蟮木幊谭绞铰?lián)系在一起，它指向利用構(gòu)造器新創(chuàng)建出來的對(duì)象；在ECMAScript中，也支持this，然而， 正如大家所熟知的，this不僅僅只用來表示創(chuàng)建出來的對(duì)象。

在接下來的博文我們講介紹Javascript的作用域和執(zhí)行上下文，以及它們的異同之處。

正文

執(zhí)行環(huán)境（Execution context）也稱為“環(huán)境”是Javascript中最為重要的一個(gè)概念。執(zhí)行環(huán)境定義了變量或函數(shù)有權(quán)訪問的其他數(shù)據(jù)，決定了它們各自的行為。每個(gè)執(zhí)行環(huán)境都有一個(gè)與之關(guān)聯(lián)的變量對(duì)象，環(huán)境中定義的所有變量和函數(shù)都保存在這個(gè)對(duì)象中。

看到了執(zhí)行環(huán)境的定義有點(diǎn)頭昏了，簡(jiǎn)而言之“每個(gè)執(zhí)行環(huán)境都有一個(gè)與之關(guān)聯(lián)的變量對(duì)象”；這里我們有一個(gè)疑問就是這個(gè)變量對(duì)象是怎樣定義的呢？

接下來，讓我們看一下變量對(duì)象的定義，具體實(shí)現(xiàn)如下：

/**
 * Execution context skeleton.
 */
activeExecutionContext = {
    // variable object.
    VO: {...},
    this: thisValue
};

通過上面的偽代碼我們知道對(duì)象字面量activeExecutionContext，它包含一個(gè)變量對(duì)象VO和this屬性。

這說明了this與上下文的可執(zhí)行代碼類型有關(guān)，其值在進(jìn)入上下文階段就確定了，并且在執(zhí)行代碼階段是不能改變的(關(guān)于this使用可以閱讀《Javascript this 的一些學(xué)習(xí)總結(jié)》)。

作用域（Scope）控制著變量和參數(shù)的可見性及生命周期。

簡(jiǎn)而言之，執(zhí)行環(huán)境是基于對(duì)象的，而作用域是基于函數(shù)的。

作用域

我們將通過一個(gè)例子介紹作用域的使用，首先，我們定義了一個(gè)函數(shù)FooA()和FooB，示例代碼如下：

/**
 * Defines a function.
 */
var FooA = function(){
    var a = 1;
    var FooB = function(){
        var b = 2;
        console.log(a, b); // outputs: 1, 2
    }
    console.log(a, b); // Error! b is not defined
}
FooA();

在示例中，第二個(gè)log輸出變量為未定義，這是由于在Javascript中定義在函數(shù)里面的參數(shù)和變量在函數(shù)外部是不可見的，而在一個(gè)函數(shù)內(nèi)部任何位置定義的參數(shù)和變量，在該函數(shù)內(nèi)部任何地方都是可見的。

執(zhí)行環(huán)境

首先，我們定義了對(duì)象字面量o，它包含一個(gè)屬性x和方法m()，示例代碼如下：

/**
 * Defines a literal object.
 * @type {Object}
 */
var o = {
    x:23,
    m: function(){
        var x = 1;
        console.log(x, this.x); // outputs 1, 23
    }
}
o.m();

示例中的兩個(gè)變量和屬性x都能被訪問，但它們被訪問的方式是截然不同，在log中訪問第一個(gè)x是通過作用域方式訪問了本地變量x，而this.x是通過執(zhí)行上下文方式訪問對(duì)象o的屬性x，因此輸出值也不盡相同。

上下文問題

接下來，我們修改一下前面的例子，在方法m()中添加一個(gè)函數(shù)f()，示例代碼如下：

/**
 * Defines a literal object.
 * @type {Object}
 */
var o = {
    x:23,
    m: function(){
        var x = 1;
        var f = function(){
            console.log(x, this.x); // outputs 1, undefined
        }
        f();
    }
}
o.m();

上面，我們通過調(diào)用方法m()來輸出x的值，由于方法m()的具體實(shí)現(xiàn)是通過調(diào)用函數(shù)f()來實(shí)現(xiàn)。

當(dāng)我們調(diào)用對(duì)象o的方法m()時(shí)，發(fā)現(xiàn)this.x是未定義的。

這究竟是什么原因呢？回憶前面的例子，由于方法m()獲取了對(duì)象o的上下文，所以this是指向?qū)ο髈的，難道是函數(shù)f()沒有獲取對(duì)象o的上下文，因此它不清楚this指向哪個(gè)對(duì)象？

首先讓我們回顧一下函數(shù)和方法以及屬性和變量的區(qū)別：方法和對(duì)象關(guān)聯(lián)，如：object.myMethod = function() {}，而函數(shù)非對(duì)象關(guān)聯(lián)：var myFunc = function {}；同樣屬性也是對(duì)象關(guān)系的，如：object.myProperty = 23，而變量：var myProperty = 23。

因?yàn)槲覀兲岬缴舷挛氖腔趯?duì)象的，所以函數(shù)f()不能獲取對(duì)象o的執(zhí)行上下文。

我們是否可以讓函數(shù)f()獲取對(duì)象o的執(zhí)行上下文呢？我們仔細(xì)地想一下，既然函數(shù)f()不清楚this指向的對(duì)象，那么可以直接調(diào)用對(duì)象的屬性就OK了。

/**
 * Fixs broken context issue.
 * @type {Object}
 */
var o = {
    x:23,
    m: function(){
        var x = 1;
        var f = function(){
            console.log(x, o.x); // outputs 1, 23
        }
        f();
    }
}
o.m();

我們?cè)诤瘮?shù)f()中直接調(diào)用對(duì)象o的屬性x，這樣函數(shù)f()就無需獲取執(zhí)行上下文直接調(diào)用對(duì)象的屬性了。

現(xiàn)在，我們又遇到一個(gè)新的問題了，如果對(duì)象不是o而是p，那么我們就需要修改函數(shù)f()中的對(duì)象了，更嚴(yán)重的情況就是我們沒有辦法確定具體是哪個(gè)對(duì)象，示例代碼如下：

/**
 * Defines a literal object.
 * @constructor
 */
var C = function(){}
C.prototype = {
    x:23,
    m: function(){
        var x = 1;
        var f = function(){
            console.log(x, this.x); // outputs 1, undefined
        }
        f();
    }
}
var instance1 = new C();
instance1.m();

上下文實(shí)例問題

上面，我們定義了函數(shù)C和它的原型對(duì)象，而且我們可以通過new方式創(chuàng)建C對(duì)象實(shí)例instance1，按照前面的方法解決Broken Context問題，具體實(shí)現(xiàn)如下：

/**
 * Defines a literal object.
 * @constructor
 */
var C = function(){}
C.prototype = {
    x:23,
    m: function(){
        var x = 1;
        var f = function(){
            console.log(x, instance1.x); // outputs 1, undefined
        }
        f();
    }
}
var instance1 = new C();
instance1.m();

如果我們?cè)趧?chuàng)建一個(gè)C的對(duì)象實(shí)例instance2，那么我們就不能指定函數(shù)f()中的對(duì)象了。

其實(shí)，this是對(duì)象實(shí)例的抽象，當(dāng)實(shí)例有多個(gè)甚至成千上百個(gè)的時(shí)候，我們需要通過this引用這些對(duì)象實(shí)例。

因此，指定對(duì)象方法不能有效解決Broken Context問題，我們還是需要使用this來引用對(duì)象，前面我們講到由于函數(shù)f()沒有獲取對(duì)象o的執(zhí)行上下文，因此它不清楚this指向哪個(gè)對(duì)象，所以輸出this.x未定義，那么我們是否可以讓函數(shù)f()獲取對(duì)象的執(zhí)行上下文。

跨作用域的上下文

我們想想既然方法是基于對(duì)象的，而且可以獲取對(duì)象的執(zhí)行上下文，那么我們直接把f()定義為方法好了。

現(xiàn)在，我們?cè)贑對(duì)象原型中定義方法f()，示例代碼如下：

/**
 * Defines a literal object.
 * @constructor
 */
var C = function(){}

C.prototype = {
    x:10,
    m: function(){
        var x = 1;
        this.f();
    },
    f: function(){
        console.log(x, this.x); // Reference ERROR!!
    }
}
var instance1 = new C();
instance1.m();

好啦，我們?cè)贑對(duì)象原型中定義方法f()，那么方法f()就可以獲取對(duì)象的執(zhí)行上下文。

現(xiàn)在，我們?cè)贔irefox運(yùn)行以上代碼，結(jié)果輸出Reference ERROR，這究竟是什么原因呢？我們想了一下問題出于變量x中，由于方法f()不能獲取方法m()的作用域，所以變量x不在方法f()中。