站长资讯网本篇文章给大家带来了关于JavaScript闭包的学习笔记，其中包括了闭包与方法栈以及闭包的作用，希望对大家有帮助。
从定义上来讲，它是一个脚本语言，而且是一个相对容易学习的脚本语言。不需要太多的专业知识，你也能够在一定程度上使用js（JavaScript的简写）代码。
当然如果你已经学习了一前端知识，你应该能理解这个工具的作用，这是一个非常方便的显示页面元素之间间距的工具。你看，你仅仅是进行了一些简单的浏览器操作，甚至你无法理解上述代码的内容，但你刚刚确确实实的嵌入了一段js代码在你所在的页面中（显然它是无害的，请放心使用）感谢up主CodingStartup起码课的视频【有了它，把网页做到跟设计图一样】以及up主ArcRain在视频下方的回复
这篇学习笔记的目的是记录我自己对于js学习路程中的一些感悟和体会，以及一些我自己认为的小技巧，而不是为了教学，所以其中的部分内容的原理我并不会给出答案，有可能是我没法准确的描述，有可能是我还没弄懂，本人水平相当有限，如果文字中有错误的部分欢迎大家指摘。
1. 学习JavaScript的契机
正式学习JavaScript是在培训班，没错我是从培训班出来的，并不是科班出身，可以说是非常的草根了。我学习的时候ES6标准还并未普及，变量命名还在用非常传统的var，学习的第一段代码是经典的console.log('Hello,world!')，当然它是在控制台上打印出来的。
当然，在培训机构中的JavaScript内容讲的是非常的浅显，只有最为基础的变量定义与命名，function声明，回调函数，ajax以及最为基础的dom操作。显然这些内容对于工作完全不够用的。
对于js学习的‘进修’机会来源于我的工作，在工作中我第一次知道了node这个东西，也了解到即便是js也是可以做后台的（我是做的JAVA培训），也开始逐渐接触到了一些ES6的标准。当然这些都是后话，最开始我接触到最大的障碍是这货。
2.‘恶心’的闭包
啊，对我只有那么一丁丁点基础的我，完全无法理解我们公司自己封装的jsonp代码，它是长这个样子的。
var jsonp = (function(){ var JSONP; return function(url){ if (JSONP) { document.getElementsByTagName("head")[0].removeChild(JSONP); } JSONP = document.createElement("script"); JSONP.type = "text/javascript"; JSONP.src = url; document.getElementsByTagName("head")[0].appendChild(JSONP); } }())
当然，现在浏览器上已经无法通过控制台直接使用这个方法了，为了防止XSS攻击浏览器已经禁止这样注入代码了，但是在服务器上还是可以用的，当然，这些都不是重点。
重点是这里
if (JSONP) { //dosome }
如果你和我当初一样，不知道什么叫闭包或者对闭包一知半解，那么，对于这里你应该也会产生疑问，思路大约是这样的
第2行定义了JSONP但是没有赋值，现在JSONP值为null，第三行返回了一个方法，第四行检测JSONP值是否为空，如果不为空则做了一些事情，好了，后面可以不用看了，这个if白写了，它百分百进不去！
你看嘛，前面也没有赋值，然后直接判断，那它明明就是null。但是实际使用的时候你会发现，这个地方第一次调用确实不会进入这个分支，但只要你调用了第二次，，它就百分百会进入这个分支。
// 这个是一个可以在控制台输出的闭包版本，你可以自己试一下 var closedhull = (function() { let name = null; // 这里直接赋值为null return function(msg){ if(name) { console.log('name:', name) return name += msg; } return name = msg; } }()) closedhull('我是第一句。') //我是第一句。 closedhull('我是第二句。') //我是第一句。我是第二句。
上面这个例子运行后，无论是从console.log()亦或是返回值上都不难看出，确实进入了if(name)的分支，这个就是闭包的表现。这里给出一下闭包的定义
闭包就是能够读取其他函数内部变量的函数。
3.闭包的样子到底是什么样的
好了，看过闭包是个啥了，先不说会不会用，至少，算是见过了，闭包有个显著的特征return function(){}
不是！
它的显著特征是在function内的function！
观察以下方法
/*第一个案例*/ function test1(){ // a应该在方法运行结束后销毁 let a = 1; return { add: function(){ return ++a; } } } let a = test1(); a.add()//2 a.add()//3 /*第二个案例*/ (function(){ // b应该在方法运行结束后销毁 let b = 1, timer = setInterval(()=>{ console.log(++b) }, 2000) setTimeout(()=>{ clearInterval(timer) }, 10000) })()// 2 3 4 5 6 /*第三个案例*/ function showMaker(obj){ // obj应该在方法运行结束后销毁 return function(){ console.log(JSON.stringify(obj)) } } let shower = showMaker({a:1}) // 显然这里你还能看到他 shower(); // {"a":1} /*第四个案例*/ let outObj = (function(){ let c = 'hello', obj = {}; Object.defineProperty(obj, 'out', { get(){ return c; }, set(v){ c = v; } }); return obj })() outObj.out // 可以读取并设置c的值
这四个都是闭包，他们都具备方法中的方法这一特性。
4.闭包与方法栈（对原理不感兴趣可以略过）
闭包的定义，1. 可以在变量的作用域外访问该变量。2. 通过某种手段延长一个局部变量的生命周期。3. 让一个局部变量的存活时间超过它的时间循环执行时间
3中由于涉及到了事件循环概念，之后涉及到时会去讲的，这里主要讨论前两种方式的定义。
一下内容如果你知道方法栈是个啥了就可以跳过了
局部作用域：在ES6之前，一般指一个方法内部（从参数列表开始，到方法体的括号结束为止），ES6中增加let关键字后，在使用let的情况下是指在一个{}中的范围内（显然，你不能在隐式的{}中使用let，编译器会禁止你做出这种行为的，因为没有{}就没有块级作用域），咱们这里为了简化讨论内容，暂且不把let的块级作用域算作闭包的范畴（其实应该算，不过意义不大，毕竟，你可以在外层块声明它。天啊，JS的命名还没拥挤到需要在一个方法内再去防止污染的程度。）
局部变量：区别于全局变量，全局变量会在某些时候被意外额创造和使用，这令人非常的…恼火和无助。局部变量就是在局部作用域下使用变量声明关键字声明出来的变量，应该很好理解。
局部变量的生命周期：好了，你在一个局部作用域中通过关键字（var const let等）声明了一个变量，然后给它赋值，这个局部变量在这个局部作用域中冒险就开始了，它会被使用，被重新赋值（除了傲娇的const小姐外），被调用（如果它是个方法），这个局部变量的本质是一个真实的值，区别在于如果它是个对象（对象，数组，方法都是对象）那么，它其实本质是一个地址的指针。如果它一个基础类型，那么它就是那个真实的值。它之所以存活是因为它有个住所。内存。
局部作用域与内存：每当出现一个局部作用域，一个方法栈就被申请了出来，在这个方法栈大概长这样子
| data5 | | data4 | | data3 | | data2 | |__data1_|
当然，它是能够套娃的，长这个样子
| | d2 | | | |_d1_| | | data3 | | data2 | |__data1___|
如果上面的东西是在太过于抽象，那么，我可以用实际案例展示一下
function stack1(){ var data1, data2, data3, data4, data5 } function stack2(){ var data1, data2, data3; function stackInner(){ var d1, d2; } }
如果方法栈能够直观的感受的话，大约就是这个样子，咱们重点来分析stack2的这种情况，同时写一点实际内容进去
function stack2(){ var data1 = '1', data2 = {x: '2'}, data3 = '3'; function stackInner(){ var d1 = '4', d2 = {y: '5'}; } stackInner() } stack2()
显然其中data1,data3,d1持有的是基本类型(string)，data2,d2持有的是引用类型(object)，反应到图上
运行时的方法栈的样子
|------>{y: '5'} | |->{x: '2'} | | d2-| || | | |_d1='4'_|| | | data3='3' | | | data2 ----| | |__data1='1'___|
画有点抽象…就这样吧。具体对象在哪呢？他们在一个叫堆的地方，不是这次的重点，还是先看方法栈内的这些变量，运行结束后，按照先进后出的原则，把栈内的局部变量一个一个的销毁，同时堆里的两个对象，由于引用被销毁，没了继续存在的意义，等待被垃圾回收。
接下来咱们要做两件事情:
-
d1不再等于4了，而是引用data1
-
return stackInner 而不是直接调用
这样闭包就完成了
function stack2(){ var data1 = {msg: 'hello'}, data2 = {x: '2'}, data3 = '3'; function stackInner(){ var d1 = data1, d2 = {y: '5'}; } return stackInner } var out = stack2()
这里有一个要点，d2赋值给data1一定是在stackInner中完成的，原因？因为再stackInner方法中d2才被声明出来，如果你在stack2中d1 = data1那么恭喜你，你隐式的声明了一个叫d1的全局变量，而且在stackInner由于变量屏蔽的原因，你也看不到全局上的d2，原本计划的闭包完全泡汤。
变量屏蔽：不同作用域中相同名称的变量就会触发变量屏蔽。
看看栈现在的样子
运行时的方法栈的样子
|------>{y: '5'} out<---| | |----| | | | d2-| | | | | | |--|_d1---|_| | | | data3='3' | | | data2(略) | | |_____data1<------|__|
好了，这个图可以和我们永别了，如果有可能，我后面会用画图工具替代，这么画图实在是太过邪典了。
这里涉及到了方法栈的一个特性，就是变量的穿透性，外部变量可以在内部的任意位置使用，因为再内部执行结束前，外部变量会一直存在。
由于stackInner被外部的out引用，导致这个对象不会随着方法栈的结束而销毁，接下来，最神奇的事情来了，由于stackInner这对象没有销毁，它内部d1依然保有data1所对应数据的引用，d1，d2一定会活下来，因为他们的爸爸stackInner活下来了，data1也以某种形式活了下来。
为什么说是某种形式，因为，本质上来说data1还是被销毁了。没错，只不过，data1所引用的那个对象的地址链接没有被销毁，这个才是本质。栈在调用结束后一定是会销毁的。但是调用本体(方法对象)只要存在，那么内部所引用的链接就不会断。
这个就是闭包的成因和本质。
5.闭包有什么用
OK，我猜测上一个章节估计很多人都直接跳过了，其实，跳过影响也不多，这个部分描述一下结论性的东西，闭包的作用。
它的最大作用就是给你的变量一个命名空间，防止命名冲突。要知道，你的框架，你export的东西，你import进来的东西，在编译的时候都会变成闭包，为的就是减少你变量对全局变量的污染，一个不依赖与import export的模块的代码大概长这个样子
(function(Constr, global){ let xxx = new Constr(env1, env2, env3) global.NameSpace = xxx; })(function(parm1, parm2, parm3) { //dosomeing reutrn { a: 'some1', b: 'some2', funcC(){ //dosome }, funcD(){ //dosome } } }, window)
当然这种封装代码的风格有多种多样的，但是大家都尽量把一套体系的内容都放到一个命名空间下，避免与其他框架产生冲突
