深入淺析JavaScript中的作用域與上下文_javascript技巧

javascript中的作用域(scope)和上下文(context)是這門語言的獨到之處，這部分歸功於他們帶來的靈活性。每個函數有不同的變數上下文和作用域。這些概念是javascript中一些強大的設計模式的後盾。然而這也給開發人員帶來很大困惑。以下全面揭示了javascript中的上下文和作用域的不同，以及各種設計模式如何使用他們。

上下文（Context）和作用域（Scope）

首先要知道的是，上下文和作用域是兩個完全不同的概念。多年來，我發現很多開發者會混淆這兩個概念（包括我自己）， 錯誤的將兩個概念混淆了。平心而論，這些年來很多術語都被混亂的使用了。

函數的每次呼叫都有與之緊密相關的作用域和上下文。從根本上來說，作用域是基於函​​數的，而上下文是基於物件的。 換句話說，作用域涉及到所被呼叫函數中的變數訪問，並且不同的呼叫場景是不一樣的。上下文始終是this關鍵字的值， 它是對擁有（控制）目前所執行程式碼的物件的參考。

變數作用域

一個變數可以定義在局部或全域作用域中，這建立了在運行時（runtime）期間變數的存取性的不同作用域範圍。 任何被定義的全域變量，意味著它需要在函數體的外部被聲明，並且存活於整個運行時（runtime），並且在任何作用域中都可以被存取。 在ES6之前，局部變數只能存在於函數體中，並且函數的每次呼叫它們都擁有不同的作用域範圍。 局部變數只能在其被呼叫期的作用域範圍內被賦值、檢索、操縱。

需要注意，在ES6之前，JavaScript不支援區塊級作用域，這表示在if語句、switch語句、for迴圈、while迴圈中無法支援區塊級作用域。 也就是說，ES6之前的JavaScript並不能建構類似Java中的那樣的區塊級作用域（變數不能在語句區塊外被存取）。但是， 從ES6開始，你可以透過let關鍵字來定義變量，它修正了var關鍵字的缺點，能夠讓你像Java語言一樣定義變量，並且支援區塊級作用域。看兩個例子：

ES6之前，我們使用var關鍵字定義變數：

function func() {
if (true) {
var tmp = 123;
}
console.log(tmp); // 123
}

之所以能夠訪問，是因為var關鍵字聲明的變數有一個變數提升的過程。而在ES6場景，建議使用let關鍵字定義變數：

function func() {
if (true) {
let tmp = 123;
}
console.log(tmp); // ReferenceError: tmp is not defined
}

這種方式，能夠避免很多錯誤。

什麼是this上下文

上下文通常取決於函數是如何被呼叫的。當一個函數被當作物件中的一個方法被呼叫的時候，this被設定在呼叫該方法的物件上：

var obj = {
foo: function(){
alert(this === obj); 
}
};
obj.foo(); // true

這個準則也適用於當呼叫函數時使用new運算元來建立物件的實例的情況下。在這種情況下，在函數的作用域內部this的值被設定為新建立的實例：

function foo(){
alert(this);
}
new foo() // foo
foo() // window

当调用一个为绑定函数时，this默认情况下是全局上下文，在浏览器中它指向window对象。需要注意的是，ES5引入了严格模式的概念， 如果启用了严格模式，此时上下文默认为undefined。

执行环境（execution context）

JavaScript是一个单线程语言，意味着同一时间只能执行一个任务。当JavaScript解释器初始化执行代码时， 它首先默认进入全局执行环境（execution context），从此刻开始，函数的每次调用都会创建一个新的执行环境。

这里会经常引起新手的困惑，这里提到了一个新的术语——执行环境（execution context），它定义了变量或函数有权访问的其他数据，决定了它们各自的行为。 它更偏向于作用域的作用，而不是我们前面讨论的上下文（Context）。请务必仔细的区分执行环境和上下文这两个概念（注：英文容易造成混淆）。 说实话，这是个非常糟糕的命名约定，但是它是ECMAScript规范制定的，你还是遵守吧。

每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中（execution stack）。在函数执行完后，栈将其环境弹出， 把控制权返回给之前的执行环境。ECMAScript程序中的执行流正是由这个便利的机制控制着。

执行环境可以分为创建和执行两个阶段。在创建阶段，解析器首先会创建一个变量对象（variable object，也称为活动对象 activation object）， 它由定义在执行环境中的变量、函数声明、和参数组成。在这个阶段，作用域链会被初始化，this的值也会被最终确定。 在执行阶段，代码被解释执行。

每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。 需要知道，我们无法手动访问这个对象，只有解析器才能访问它。

作用域链（The Scope Chain）

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。 作用域链包含了在环境栈中的每个执行环境对应的变量对象。通过作用域链，可以决定变量的访问和标识符的解析。 注意，全局执行环境的变量对象始终都是作用域链的最后一个对象。我们来看一个例子：

var color = "blue";
function changeColor(){
var anotherColor = "red";
function swapColors(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
// 这里可以访问color, anotherColor, 和 tempColor
}
// 这里可以访问color 和 anotherColor，但是不能访问 tempColor
swapColors();
}
changeColor();
// 这里只能访问color
console.log("Color is now " + color);

上述代码一共包括三个执行环境：全局环境、changeColor()的局部环境、swapColors()的局部环境。 上述程序的作用域链如下图所示：

从上图发现。内部环境可以通过作用域链访问所有的外部环境，但是外部环境不能访问内部环境中的任何变量和函数。 这些环境之间的联系是线性的、有次序的。

对于标识符解析（变量名或函数名搜索）是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始， 然后逐级地向后（全局执行环境）回溯，直到找到标识符为止。

闭包

闭包是指有权访问另一函数作用域中的变量的函数。换句话说，在函数内定义一个嵌套的函数时，就构成了一个闭包， 它允许嵌套函数访问外层函数的变量。通过返回嵌套函数，允许你维护对外部函数中局部变量、参数、和内函数声明的访问。 这种封装允许你在外部作用域中隐藏和保护执行环境，并且暴露公共接口，进而通过公共接口执行进一步的操作。可以看个简单的例子：

function foo(){
var localVariable = 'private variable';
return function bar(){
return localVariable;
}
}
var getLocalVariable = foo();
getLocalVariable() // private variable

模块模式最流行的闭包类型之一，它允许你模拟公共的、私有的、和特权成员：

var Module = (function(){
var privateProperty = 'foo';
function privateMethod(args){
// do something
}
return {
publicProperty: '',
publicMethod: function(args){
// do something
},
privilegedMethod: function(args){
return privateMethod(args);
}
};
})();

模块类似于一个单例对象。由于在上面的代码中我们利用了(function() { ... })();的匿名函数形式，因此当编译器解析它的时候会立即执行。 在闭包的执行上下文的外部唯一可以访问的对象是位于返回对象中的公共方法和属性。然而，因为执行上下文被保存的缘故， 所有的私有属性和方法将一直存在于应用的整个生命周期，这意味着我们只有通过公共方法才可以与它们交互。

另一种类型的闭包被称为立即执行的函数表达式（IIFE）。其实它很简单，只不过是一个在全局环境中自执行的匿名函数而已：

(function(window){ 
var foo, bar;
function private(){
// do something
}
window.Module = {
public: function(){
// do something 
}
};
})(this);

对于保护全局命名空间免受变量污染而言，这种表达式非常有用，它通过构建函数作用域的形式将变量与全局命名空间隔离， 并通过闭包的形式让它们存在于整个运行时（runtime）。在很多的应用和框架中，这种封装源代码的方式用处非常的流行， 通常都是通过暴露一个单一的全局接口的方式与外部进行交互。

Call和Apply

这两个方法内建在所有的函数中（它们是Function对象的原型方法），允许你在自定义上下文中执行函数。 不同点在于，call函数需要参数列表，而apply函数需要你提供一个参数数组。如下：

var o = {};
function f(a, b) {
return a + b;
}
// 将函数f作为o的方法，实际上就是重新设置函数f的上下文
f.call(o, 1, 2); // 3
f.apply(o, [1, 2]); // 3

两个结果是相同的，函数f在对象o的上下文中被调用，并提供了两个相同的参数1和2。

在ES5中引入了Function.prototype.bind方法，用于控制函数的执行上下文，它会返回一个新的函数， 并且这个新函数会被永久的绑定到bind方法的第一个参数所指定的对象上，无论该函数被如何使用。 它通过闭包将函数引导到正确的上下文中。对于低版本浏览器，我们可以简单的对它进行实现如下（polyfill）：

if(!('bind' in Function.prototype)){
Function.prototype.bind = function(){
var fn = this, 
context = arguments[0], 
args = Array.prototype.slice.call(arguments, 1);
return function(){
return fn.apply(context, args.concat(arguments));
}
}
}

bind()方法通常被用在上下文丢失的场景下，例如面向对象和事件处理。之所以要这么做， 是因为节点的addEventListener方法总是为事件处理器所绑定的节点的上下文中执行回调函数， 这就是它应该表现的那样。但是，如果你想要使用高级的面向对象技术，或需要你的回调函数成为某个方法的实例， 你将需要手动调整上下文。这就是bind方法所带来的便利之处：

function MyClass(){
this.element = document.createElement('div');
this.element.addEventListener('click', this.onClick.bind(this), false);
}
MyClass.prototype.onClick = function(e){
// do something
};

回顾上面bind方法的源代码，你可能会注意到有两次调用涉及到了Array的slice方法：

Array.prototype.slice.call(arguments, 1);
[].slice.call(arguments);

我们知道，arguments对象并不是一个真正的数组，而是一个类数组对象，虽然具有length属性，并且值也能够被索引， 但是它们不支持原生的数组方法，例如slice和push。但是，由于它们具有和数组类似的行为，数组的方法能够被调用和劫持， 因此我们可以通过类似于上面代码的方式达到这个目的，其核心是利用call方法。

这种调用其他对象方法的技术也可以被应用到面向对象中，我们可以在JavaScript中模拟经典的继承方式：

MyClass.prototype.init = function(){
// call the superclass init method in the context of the "MyClass" instance
MySuperClass.prototype.init.apply(this, arguments);
}

也就是利用call或apply在子类（MyClass）的实例中调用超类（MySuperClass）的方法。

ES6中的箭头函数

ES6中的箭头函数可以作为Function.prototype.bind()的替代品。和普通函数不同，箭头函数没有它自己的this值， 它的this值继承自外围作用域。

对于普通函数而言，它总会自动接收一个this值，this的指向取决于它调用的方式。我们来看一个例子：

var obj = {
// ...
addAll: function (pieces) {
var self = this;
_.each(pieces, function (piece) {
self.add(piece);
});
},
// ...
}

在上面的例子中，最直接的想法是直接使用this.add(piece)，但不幸的是，在JavaScript中你不能这么做， 因为each的回调函数并未从外层继承this值。在该回调函数中，this的值为window或undefined， 因此，我们使用临时变量self来将外部的this值导入内部。我们还有两种方法解决这个问题：

使用ES5中的bind()方法

var obj = {
// ...
addAll: function (pieces) {
_.each(pieces, function (piece) {
this.add(piece);
}.bind(this));
},
// ...
}

使用ES6中的箭头函数

var obj = {
// ...
addAll: function (pieces) {
_.each(pieces, piece => this.add(piece));
},
// ...
}

在ES6版本中，addAll方法从它的调用者处获得了this值，内部函数是一个箭头函数，所以它集成了外部作用域的this值。

注意：对回调函数而言，在浏览器中，回调函数中的this为window或undefined（严格模式），而在Node.js中， 回调函数的this为global。实例代码如下：

function hello(a, callback) {
callback(a);
}
hello('weiwei', function(a) {
console.log(this === global); // true
console.log(a); // weiwei
});

小結

在你學習高階的設計模式之前，先理解這些概念非常的重要，因為作用域和上下文在現代JavaScript中扮演著的最基本的角色。 無論我們談論的是閉包、物件導向、繼承、或是各種原生實現，上下文和作用域都在其中扮演著至關重要的角色。 如果你的目標是精通JavaScript語言，並且深入的理解它的各個組成，那麼作用域和上下文就是你的起點。

以上內容是小編給大家介紹的JavaScript中的作用域和上下文，希望對大家有幫助 ！