图解Javascript上下文与做用域

本文尝试阐述Javascript中的上下文与做用域背后的机制，主要涉及到执行上下文（execution context）、做用域链（scope chain）、闭包（closure）、this等概念。

>> 原文 <<

Execution context

执行上下文（简称上下文）决定了Js执行过程当中能够获取哪些变量、函数、数据，一段程序可能被分割成许多不一样的上下文，每个上下文都会绑定一个变量对象（variable object），它就像一个容器，用来存储当前上下文中全部已定义或可获取的变量、函数等。位于最顶端或最外层的上下文称为全局上下文（global context），全局上下文取决于执行环境，如Node中的global和Browser中的window：

须要注意的是，上下文与做用域（scope）是不一样的概念。Js自己是单进程的，每当有function被执行时，就会产生一个新的上下文，这一上下文会被压入Js的上下文堆栈（context stack）中，function执行结束后则被弹出，所以Js解释器老是在栈顶上下文中执行。在生成新的上下文时，首先会绑定该上下文的变量对象，其中包括arguments和该函数中定义的变量；以后会建立属于该上下文的做用域链（scope chain），最后将this赋予这一function所属的Object，这一过程能够经过下图表示：

this

上文提到this被赋予function所属的Object，具体来讲，当function是定义在global对中时，this指向global；当function做为Object的方法时，this指向该Object：

var x = 1;
var f = function(){
  console.log(this.x);
}
f();  // -> 1

var ff = function(){
  this.x = 2;
  console.log(this.x);
}
ff(); // -> 2
x     // -> 2

var o = {x: "o's x", f: f};
o.f(); // "o's x"

Scope chain

上文提到，在function被执行时生成新的上下文时会先绑定当前上下文的变量对象，再建立做用域链。咱们知道function的定义是能够嵌套在其余function所建立的上下文中，也能够并列地定义在同一个上下文中（如global）。做用域链实际上就是自下而上地将全部嵌套定义的上下文所绑定的变量对象串接到一块儿，使嵌套的function能够“继承”上层上下文的变量，而并列的function之间互不干扰：

var x = 'global';
function a(){
  var x = "a's x";
  function b(){
    var y = "b's y";
    console.log(x);
  };
  b();
}
function c(){
  var x = "c's x";
  function d(){
    console.log(y);
  };
  d();
}
a();  // -> "a's x"
c();  // -> ReferenceError: y is not defined
x     // -> "global"
y     // -> ReferenceError: y is not defined

Closure

若是理解了上文中提到的上下文与做用域链的机制，再来看闭包的概念就很清楚了。每一个function在调用时会建立新的上下文及做用域链，而做用域链就是将外层（上层）上下文所绑定的变量对象逐一串连起来，使当前function能够获取外层上下文的变量、数据等。若是咱们在function中定义新的function，同时将内层function做为值返回，那么内层function所包含的做用域链将会一块儿返回，即便内层function在其余上下文中执行，其内部的做用域链仍然保持着原有的数据，而当前的上下文可能没法获取原先外层function中的数据，使得function内部的做用域链被保护起来，从而造成“闭包”。看下面的例子：

var x = 100;
var inc = function(){
  var x = 0;
  return function(){
    console.log(x++);
  };
};

var inc1 = inc();
var inc2 = inc();

inc1();  // -> 0
inc1();  // -> 1
inc2();  // -> 0
inc1();  // -> 2
inc2();  // -> 1
x;       // -> 100

执行过程以下图所示，inc内部返回的匿名function在建立时生成的做用域链包括了inc中的x，即便后来赋值给inc1和inc2以后，直接在global context下调用，它们的做用域链仍然是由定义中所处的上下文环境决定，并且因为x是在function inc中定义的，没法被外层的global context所改变，从而实现了闭包的效果：

this in closure

咱们已经反复提到执行上下文和做用域其实是经过function建立、分割的，而function中的this与做用域链不一样，它是由执行该function时当前所处的Object环境所决定的，这也是this最容易被混淆用错的一点。通常状况下的例子以下：

var name = "global";
var o = {
  name: "o",
  getName: function(){
    return this.name
  }
};
o.getName();  // -> "o"

因为执行o.getName()时getName所绑定的this是调用它的o，因此此时this == o；更容易搞混的是在closure条件下：

var name = "global";
var oo = {
  name: "oo",
  getNameFunc: function(){
    return function(){
      return this.name;
    };
  }
}
oo.getNameFunc()();  // -> "global"

此时闭包函数被return后调用至关于：

getName = oo.getNameFunc();
getName();  // -> "global"

换一个更明显的例子：

var ooo = {
  name: "ooo",
  getName: oo.getNameFunc() // 此时闭包函数的this被绑定到新的Object
};
ooo.getName();  // -> "ooo"

固然，有时候为了不闭包中的this在执行时被替换，能够采起下面的方法：

var name = "global";
var oooo = {
  name: "ox4",
  getNameFunc: function(){
    var self = this;
    return function(){
       return self.name;
    };
  }
};
oooo.getNameFunc()(); // -> "ox4"

或者是在调用时强行定义执行的Object：

var name = "global";
var oo = {
  name: "oo",
  getNameFunc: function(){
    return function(){
      return this.name;
    };
  }
}
oo.getNameFunc()();  // -> "global"
oo.getNameFunc().bind(oo)(); // -> "oo"

总结

Js是一门颇有趣的语言，因为它的不少特性是针对HTML中DOM的操做，于是显得随意而略失严谨，但随着前端的不断繁荣发展和Node的兴起，Js已经再也不是"toy language"或是jQuery时代的"CSS扩展"，本文提到的这些概念不管是对新手仍是从传统Web开发中过分过来的Js开发人员来讲，都很容易被混淆或误解，但愿本文能够有所帮助。

写这篇总结的缘由是我在Github上分享的Learn javascript in one picture，刚开始有人质疑这只能算是一张语法表（syntax cheat sheet），根本不会涉及更深层的闭包、做用域等内容，可是出乎意料的是这个项目居然得到3000多个star，因此不能有始无终，以上。

References

1. Understanding Scope and Context in JavaScript
2. this - JavaScript | MDN
3. 闭包 - JavaScript | MDN