学习前端也有一段时间了，发现自己对 作用域链 闭包...等一些概念虽然貌似理解会用了，但是可谓知其然不知其所以然，总感觉不太靠谱，所以参考了一些前辈的博客和加上自己的实践，写下这篇文章，来加强对这些概念的理解 (暂不包括es6)；
内存（堆与栈）
由于JavaScript存在垃圾自动回收机制，所以我们在开发中并不用像C和C++之类语言一样手动去跟踪内存使用情况，所以很多初学者就忽略了这个问题，但是我发现如果真的对内存空间一无所知，对理解一些JavaScript中的概念比如基本类型和引用数据类型的区别；比如浅拷贝与深拷贝什么不同？还有闭包，原型等是很模糊的。
JavaScript中并没有严格意义上区分栈内存与堆内存。因此我们可以粗浅的理解为JavaScript的所有数据都保存在堆内存中。但是在某些场景，我们仍然需要基于堆栈数据结构的思路进行处理，比如JavaScript的在逻辑上实现了堆栈。因此理解堆栈数据结构的原理与特点任然十分重要。
栈的存取方式先进后出，后进先出（JavaScript中有5种基础数据类型，分别是Undefined、Null、Boolean、Number、String保存在栈内存中）
-
堆存取数据方式是无序的，但并不影响我们使用，就像JSON格式的数据，我们知道key就能准确拿到value
（引用类型值（对象、数组、函数、正则）保存在堆内存中的对象，变量中保存的实际上只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象。）结合图实例理解
var num1 = 1;
var num2= num1; //b赋值a,只是简单的数值的拷贝，他们相互独立，互不影响
num1=3;
console.log(num2); //1
var obj1 = {name:'chris',age:'23'};
var obj2 = obj1;
obj1.name = 'xxx';
console.log(obj2); // {name:'xxx',age:'23'}
// obj1赋给obj2的是指针（指向内存的地址），当地址指针相同时，尽管他
//们相互独立，但是在变量对象中访问到的具体对象实际上是同一个。如图所示。
执行上下文(Execution Context)
执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。
- 全局环境：JavaScript代码运行起来会首先进入该环境
- 函数环境：当函数被调用执行时，会进入当前函数中执行代码
- eval(不常用)
因此在一个JavaScript程序中，必定会产生多个执行上下文，JavaScript引擎会以堆栈的方式来处理它们，这个堆栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。
结合图实例
首先是全局上下文入栈，然后执行代码，直到遇到read()，激活read函数并且创建了它自己的执行上下文
第二步read的执行上下文入栈，执行代码，遇到say(),激活say函数并且创建了它自己的执行上下
第三步say的执行上下文入栈，执行代码
第四步在say的可执行代码中，再没有遇到其他能生成执行上下文的情况，因此这段代码顺利执行完毕，say的上下文从栈中弹出。
第五步say的执行上下文弹出之后，继续执行readr的可执行代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样就只身下全局上下文了（关闭浏览器出栈）
function read() {
console.log(xxx)
function say() {
console.log(xxx)
}
say();
}
read();
一、基础概念回顾
函数在被调用执行时，会创建一个当前函数的执行上下文。在该执行上下文的创建阶段，变量对象、作用域链、闭包、this指向会分别被确定。而一个JavaScript程序中一般来说会有多个函数，JavaScript引擎使用函数调用栈来管理这些函数的调用顺序。函数调用栈的调用顺序与栈数据结构一致。
二、认识断点调试工具
在尽量新版本的chrome浏览器中（不确定你用的老版本与我的一致），调出chrome浏览器的开发者工具。
浏览器右上角竖着的三点 -> 更多工具 -> 开发者工具 -> Sources
界面如图。
断点调试界面
在我的demo中，我把代码放在app.js中，在index.html中引入。我们暂时只需要关注截图中红色箭头的地方。在最右侧上方，有一排图标。我们可以通过使用他们来控制函数的执行顺序。从左到右他们依次是：
resume/pause script execution恢复/暂停脚本执行
step over next function call跨过，实际表现是不遇到函数时，执行下一步。遇到函数时，不进入函数直接执行下一步。
step into next function call跨入，实际表现是不遇到函数时，执行下一步。遇到到函数时，进入函数执行上下文。
step out of current function跳出当前函数
deactivate breakpoints停用断点
don‘t pause on exceptions不暂停异常捕获
其中跨过，跨入，跳出是我使用最多的三个操作。
上图右侧第二个红色箭头指向的是函数调用栈（call Stack），这里会显示代码执行过程中，调用栈的变化。
右侧第三个红色箭头指向的是作用域链（Scope），这里会显示当前函数的作用域链。其中Local表示当前的局部变量对象，Closure表示当前作用域链中的闭包。借助此处的作用域链展示，我们可以很直观的判断出一个例子中，到底谁是闭包，对于闭包的深入了解具有非常重要的帮助作用。
三、断点设置
在显示代码行数的地方点击，即可设置一个断点。断点设置有以下几个特点：
在单独的变量声明(如果没有赋值)，函数声明的那一行，无法设置断点。
设置断点后刷新页面，JavaScript代码会执行到断点位置处暂停执行，然后我们就可以使用上边介绍过的几个操作开始调试了。
当你设置多个断点时，chrome工具会自动判断从最早执行的那个断点开始执行，因此我一般都是设置一个断点就行了。
四、实例
接下来，我们借助一些实例，来使用断点调试工具，看一看，我们的demo函数，在执行过程中的具体表现。
// demo01
var fn;
function foo() {
var a = 2;
function baz() {
console.log( a );
}
fn = baz;
}
function bar() {
fn();
}
foo();
bar(); // 2
在向下阅读之前，我们可以停下来思考一下，这个例子中，谁是闭包？
这是来自《你不知道的js》中的一个例子。由于在使用断点调试过程中，发现chrome浏览器理解的闭包与该例子中所理解的闭包不太一致，因此专门挑出来，供大家参考。我个人更加倾向于chrome中的理解。
第一步：设置断点，然后刷新页面。
设置断点
第二步：点击上图红色箭头指向的按钮（step into），该按钮的作用会根据代码执行顺序，一步一步向下执行。在点击的过程中，我们要注意观察下方call stack 与 scope的变化，以及函数执行位置的变化。
一步一步执行，当函数执行到上例子中
baz函数被调用执行，foo形成了闭包
我们可以看到，在chrome工具的理解中，由于在foo内部声明的baz函数在调用时访问了它的变量a，因此foo成为了闭包。这好像和我们学习到的知识不太一样。我们来看看在《你不知道的js》这本书中的例子中的理解。
你不知道的js中的例子
书中的注释可以明显的看出，作者认为fn为闭包。即baz，这和chrome工具中明显是不一样的。
而在备受大家推崇的《JavaScript高级编程》一书中，是这样定义闭包。
JavaScript高级编程中闭包的定义
书中作者将自己理解的闭包与包含函数所区分
这里chrome中理解的闭包，与我所阅读的这几本书中的理解的闭包不一样。具体这里我先不下结论，但是我心中更加偏向于相信chrome浏览器。
我们修改一下demo01中的例子，来看看一个非常有意思的变化。
/ / demo02
var fn;
var m = 20;
function foo() {
var a = 2;
function baz(a) {
console.log(a);
}
fn = baz;
}
function bar() {
fn(m);
}
foo();
bar(); // 20
这个例子在demo01的基础上，我在baz函数中传入一个参数，并打印出来。在调用时，我将全局的变量m传入。输出结果变为20。在使用断点调试看看作用域链。
闭包没了，作用域链中没有包含foo了。
是不是结果有点意外，闭包没了，作用域链中没有包含foo了。我靠，跟我们理解的好像又有点不一样。所以通过这个对比，我们可以确定闭包的形成需要两个条件。
在函数内部创建新的函数；
新的函数在执行时，访问了函数的变量对象；
还有更有意思的。
我们继续来看看一个例子。
// demo03
function foo() {
var a = 2;
return function bar() {
var b = 9;
return function fn() {
console.log(a);
}
}
}
var bar = foo();
var fn = bar();
fn();
在这个例子中，fn只访问了foo中的a变量，因此它的闭包只有foo。
闭包只有foo
修改一下demo03，我们在fn中也访问bar中b变量试试看。
// demo04
function foo() {
var a = 2;
return function bar() {
var b = 9;
return function fn() {
console.log(a, b);
}
}
}
var bar = foo();
var fn = bar();
fn();
这个时候闭包变成了两个
这个时候，闭包变成了两个。分别是bar，foo。
我们知道，闭包在模块中的应用非常重要。因此，我们来一个模块的例子，也用断点工具来观察一下。
// demo05
(function() {
var a = 10;
var b = 20;
var test = {
m: 20,
add: function(x) {
return a + x;
},
sum: function() {
return a + b + this.m;
},
mark: function(k, j) {
return k + j;
}
}
window.test = test;
})();
test.add(100);
test.sum();
test.mark();
var _mark = test.mark;
_mark();
add执行时，闭包为外层的自执行函数，this指向test
sum执行时，同上
mark执行时，闭包为外层的自执行函数，this指向test
_mark执行时，闭包为外层的自执行函数，this指向window
注意：这里的this指向显示为Object或者Window，大写开头，他们表示的是实例的构造函数，实际上this是指向的具体实例
test.mark能形成闭包，跟下面的补充例子（demo07）情况是一样的。
我们还可以结合点断调试的方式，来理解那些困扰我们很久的this指向。随时观察this的指向，在实际开发调试中非常有用。
var a = 10;
var obj = {
a: 20
}
function fn () {
console.log(this.a);
}
fn.call(obj); // 20
this指向obj
补充一个例子
// demo07
function foo() {
var a = 10;
function fn1() {
return a;
}
function fn2() {
return 10;
}
fn2();
}
foo();
这个例子，和其他例子不太一样。虽然fn2并没有访问到foo的变量，但是foo执行时仍然变成了闭包。而当我将fn1的声明去掉时，闭包便不会出现了。我暂时也不知道应该如何解释这种情况。只能大概知道与fn1有关，可能浏览器在实现时就认为只要存在访问上层作用域的可能性，就会被当成一个闭包吧。所以暂时就只能将它作为一个特例记住。
更多的例子，大家可以自行尝试，总之，学会了使用断点调试之后，我们就能够很轻松的了解一段代码的执行过程了。这对快速定位错误，快速了解他人的代码都有非常巨大的帮助。大家一定要动手实践，把它给学会。
最后，根据以上的摸索情况，再次总结一下闭包：
闭包是在函数被调用执行的时候才被确认创建的。
闭包的形成，与作用域链的访问顺序有直接关系。
只有内部函数访问了上层作用域链中的变量对象时，才会形成闭包，因此，我们可以利用闭包来访问函数内部的变量。
