花了一整夜的时间去整（chao）理（xi）王福朋的原型和闭包系列，原因是因为

• 第一：我觉得这应该是我目前看过的最全最好的一个系列了
• 第二：在之后有时间我希望在原有的基础上可以添加一些自己的注解，方便自己以后翻阅能更快理解
• 第三：第一次用hexo写文章，总得找点好的东西来写一写吧

好了，基于以上的几个原因，我从王福朋的博客中搬运了他的JavaScript原型与闭包系列博文（如有侵犯，我也不管，哈哈哈）

这里写的文章和原作者的一模一样，就算是原文拷贝，也花了我几个小时的时间，可以看出原作者在写博客的时候是付出了多大的辛劳（在这里感谢之）

如果大家是想了解JavaScript原型和闭包内容，推荐大家到王福朋的博客中去查看

本系列用了大量的篇幅讲解了上下文环境和作用域，有些人反映这两个是一回儿事。本文就用一个小例子来说明一下，作用域和上下文环境绝对不是一回事儿。

再说明之前，咱们先用简单的语言来概括一下这两个的区别。

前面提到的上下文环境和作用域的知识，除了了解这些知识之外，还是理解闭包的基础。

至于“闭包”这个词的概念的文字描述，确实不好解释，我看过很多遍，但是现在还是记不住。

先解释一下什么是“自由变量”。

在A作用域中使用的变量x，却没有在A作用域中声明（即在其他作用域中声明的），对于A作用域来说，x就是一个自由变量。如下图

如上程序中，在调用fn()函数时，函数体中第6行。取b的值就直接可以在fn作用域中取，因为b就是在这里定义的。而取x的值时，就需要到另一个作用域中取。到哪个作用域中取呢？

所以，不要在用以上说法了。相比而言，用这句话描述会更加贴切—— 要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，切记切记 ——其实这就是所谓的“静态作用域”。

对于本文第一段代码，在fn函数中，取自由变量x的值时，要到哪个作用域中取？——要到创建fn函数的那个作用域中取——无论fn函数将在哪里调用。

上文简单介绍了作用域，本文把作用域和上下文环境结合起来说一下，会理解的更深一些。

如上图，我们在上文中已经介绍了，除了全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时确定。

下面我们将按照程序执行的顺序，一步一步把各个上下文环境加上。另外，对上下文环境不了解的朋友，可以去看看之前的两篇文章：
深入理解javascript原型和闭包-8-简述【执行上下文】上
深入理解javascript原型和闭包-9-简述【执行上下文】下

提到作用域，有一句话大家（有js开发经验者）可能比较熟悉：“javascript没有块级作用域”。所谓“块”，就是大括号“｛｝”中间的语句。例如if语句：

1
2
3
4
5

var i = 10
if (i > 1) {
    var name = '王福朋'
}
console.log(name) //  王福朋

再比如for语句：

1
2
3
4

for(var i = 0; i < 10; i++){
    //...
}
console.log(i) //  10

所以，我们在编写代码的时候，不要在“块”里面声明变量，要在代码的一开始就声明好了。以避免发生歧义。如：

1
2
3
4
5

var i
for(i = 0; i < 10; i++){
    //...
}
console.log(i) //  10

其实，你光知道“javascript没有块级作用域”是完全不够的，你需要知道的是—— javascript除了全局作用域之外，只有函数可以创建的作用域 。

所以， 我们在声明变量时，全局代码要在代码前端声明，函数中要在函数体一开始就声明好。除了这两个地方，其他地方都不要出现变量声明。而且建议用“单var”形式 。

jQuery就是一个很好的示例：

继续上文的内容。

执行全局代码时，会产生一个执行上下文环境，每次调用函数都又会产生执行上下文环境。当函数调用完成时，这个上下文环境以及其中的数据都会被消除，再重新回到全局上下文环境。 处于活动状态的执行上下文环境只有一个 。

可根据以下代码来详细介绍上下文栈的压栈、出栈过程。

如上代码。

接着上一节讲的话，应该轮到“执行上下文栈”了，但是这里不得不插入一节，把this说一下。因为this很重要，js的面试题如果不出几个与this有关的，那出题者都不合格。

其实，this的取值，分四种情况。我们来挨个看一下。

在此再强调一遍一个非常重要的知识点： 在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了 。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。

继续上一篇文章（深入理解javascript原型和闭包-8-简述【执行上下文】上）的内容。

上一篇我们讲到在全局环境下的代码段中，执行上下文环境中有如何数据：

变量、函数表达式——变量声明，默认赋值为undefined；
this——赋值；
函数声明——赋值；

如果在函数中，除了以上数据之外，还会有其他数据。先看以下代码：

以上代码展示了在函数体的语句执行之前，arguments变量和函数的参数都已经被赋值。从这里可以看出， 函数每被调用一次，都会产生一个新的执行上下文环境。因为不同的调用可能就会有不同的参数 。

另外一点不同在于， 函数在定义的时候（不是调用的时候），就已经确定了函数体内部自由变量的作用域 。至于“自由变量”和“作用域”是后面要专门拿出来讲述的重点，这里就先点到为止。用一个例子说明一下：

好了，总结完了函数的附加内容，我们就此要全面总结一下上下文环境的数据内容。

什么是“执行上下文”（也叫做“执行上下文环境”）？暂且不下定义，先看一段代码：

第一句报错，a未定义，很正常。第二句、第三句输出都是undefined，说明浏览器在执行console.log(a)时，已经知道了a是undefined，但却不知道a是10（第三句中）。

在一段js代码拿过来真正一句一句运行之前，浏览器已经做了一些“准备工作”，其中就包括对变量的声明，而不是赋值。变量赋值是在赋值语句执行的时候进行的。可用下图模拟：

这是第一种情况。

下面还有。先来个简单的。

有js开发经验的朋友应该都知道，你无论在哪个位置获取this，都是有值的。至于this的取值情况，比较复杂，会专门拿出一篇文章来讲解。

与第一种情况不同的是：第一种情况只是对变量进行声明（并没有赋值），而此种情况直接给this赋值。这也是“准备工作”情况要做的事情之一。

下面还有。。。第三种情况。