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

前述

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

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

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

正文

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

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

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

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

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

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

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

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

作用域

我們將通過一個例子介紹作用域的使用，首先，我們定義了一個函數(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();

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

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

首先，我們定義了對象字面量o，它包含一個屬性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();

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

上下文問題

接下來，我們修改一下前面的例子，在方法m()中添加一個函數(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()的具體實現(xiàn)是通過調(diào)用函數(shù)f()來實現(xiàn)。

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

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

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

因為我們提到上下文是基于對象的，所以函數(shù)f()不能獲取對象o的執(zhí)行上下文。

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

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

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

/**
 * 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ù)C和它的原型對象，而且我們可以通過new方式創(chuàng)建C對象實例instance1，按照前面的方法解決Broken Context問題，具體實現(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();

如果我們在創(chuàng)建一個C的對象實例instance2，那么我們就不能指定函數(shù)f()中的對象了。

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

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

跨作用域的上下文

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

現(xiàn)在，我們在C對象原型中定義方法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對象原型中定義方法f()，那么方法f()就可以獲取對象的執(zhí)行上下文。

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