扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇“JavaScript闭包如何理解”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript闭包如何理解”文章吧。
专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!成都创新互联公司为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，网站设计制作、做网站负责任的成都网站制作公司!
闭包概念：
函数执⾏后返回结果是⼀个内部函数，并被外部变量所引⽤，如果内部函数持有被执⾏函数作⽤域的变量，即形成了闭包。可以在内部函数访问到外部函数作⽤域。
使⽤闭包，⼀可以读取函数中的变量，⼆可以将函数中的变量存储在内存 中，保护变量不被污染。⽽正因闭包会把函数中的变量值存储在内存中，会对内存有消耗，所以不能滥⽤闭包，否则会影响⽹⻚性能，造成内存泄漏。当不需要使⽤闭包时，要及时释放内存，可将内层函数对象的变量赋值为null。
闭包特点：一个外函数生成的多个闭包内存空间彼此独立。
闭包应用场景：
在内存中维持变量：如果缓存数据、柯里化
保护函数内的变量安全：如迭代器、生成器。
缺点：闭包会导致原有的作用域链不释放，造成内存的泄漏。
内存消耗有负⾯影响。因内部函数保存了对外部变量的引⽤，导致⽆法被垃圾回收，增⼤内存使⽤量，所以使⽤ 不当会导致内存泄漏
对处理速度具有负⾯影响。闭包的层级决定了引⽤的外部变量在查找时经过的作⽤域链⻓度
可能获取到意外的值(captured value)
优点：
可以从内部函数访问外部函数的作⽤域中的变量，且访问到的变量⻓期驻扎在内存中，可供之后使⽤
避免变量污染全局
把变量存到独⽴的作⽤域，作为私有成员存在
一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。
词法作用域
请看下面的代码：
function init() {
var name = "Mozilla"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数，一个闭包
alert(name); // 使用了父函数中声明的变量
}
displayName();
}
init();init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。请注意，displayName() 没有自己的局部变量。然而，因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。
使用这个 JSFiddle 链接运行该代码后发现， displayName() 函数内的 alert() 语句成功显示出了变量 name 的值（该变量在其父函数中声明）。这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。词法（lexical）一词指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。
基本数据类型的变量的值一般存在栈内存中，基本的数据类型: Number 、Boolean、Undefined、String、Null。；而对象类型的变量的值存储在堆内存中，栈内存存储对应空间地址。
var a = 1
//a是一个基本数据类型
var b = {m: 20 }
//b是一个对象对应内存存储：
当我们执行 b={m:30}时，堆内存就有新的对象{m：30}，栈内存的b指向新的空间地址( 指向{m：30} )，而堆内存中原来的{m：20}就会被程序引擎垃圾回收掉，节约内存空间。我们知道js函数也是对象，它也是在堆与栈内存中存储的，我们来看一下转化：
var a = 1;
function fn(){
var b = 2
function fn1(){
console.log(b)
}
fn1()
}
fn()
栈是一种先进后出的数据结构：
在执行fn前，此时我们在全局执行环境(浏览器就是window作用域)，全局作用域里有个变量a；
进入fn，此时栈内存就会push一个fn的执行环境，这个环境里有变量b和函数对象fn1，这里可以访问自身执行环境和全局执行环境所定义的变量
进入fn1，此时栈内存就会push 一个fn1的执行环境，这里面没有定义其他变量，但是我们可以访问到fn和全局执行环境里面的变量，因为程序在访问变量时，是向底层栈一个个找（这就是Javascript语言特有的"链式作用域"结构（chain scope)），如果找到全局执行环境里都没有对应变量，则程序抛出underfined的错误。
随着fn1()执行完毕，fn1的执行环境被杯销毁，接着执行完fn()，fn的执行环境也会被销毁，只剩全局的执行环境下，现在没有b变量，和fn1函数对象了，只有a 和 fn(函数声明作用域是window下)
在函数内访问某个变量是根据函数作用域链来判断变量是否存在的，而函数作用域链是程序根据函数所在的执行环境栈来初始化的，所以上面的例子，我们在fn1里面打印变量b，根据fn1的作用域链的找到对应fn执行环境下的变量b。所以当程序在调用某个函数时，做了一下的工作：准备执行环境，初始函数作用域链和arguments参数对象
我们现在看下闭包例子
function outer() {
var a = '变量1'
var inner = function () {
console.info(a)
}
return inner // inner 就是一个闭包函数，因为他能够访问到outer函数的作用域
}
var inner = outer() // 获得inner闭包函数
inner() //"变量1"当程序执行完var inner = outer()，其实outer的执行环境并没有被销毁，因为他里面的变量a仍然被被inner的函数作用域链所引用，当程序执行完inner(), 这时候，inner和outer的执行环境才会被销毁调；《JavaScript高级编程》书中建议：由于闭包会携带包含它的函数的作用域，因为会比其他函数占用更多内容，过度使用闭包，会导致内存占用过多。
下面通过outer外函数和inner内函数来讲解闭包的共享变量问题。
同一个外函数生成的多个闭包是独立空间还是共享空间如何判断？请先看实例
//第一种情况 调用时给外函数传入变量值
function outer(name){
return function(){
console.log(name)
}
}
f1 = outer('yang')
f2 = outer('fang')
console.log(f1.toString())
f1() //yang
f2() //fang
f1() //yang
//第二种情况：外函数局部变量值为变化
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[0]; //16
var f2 = results[1]; //16
var f3 = results[2]; //16
console.log(f1 )
//第三种情况：外函数的局部变量值变化。
function test(){
var i = 0;
return function(){
console.log(i++)
}
};
var a = test();
var b = test();
//依次执行a,a,b,控制台会输出什么呢？0 1 0
//b为什么不是2
a();a();b();同一个外函数生成的多个闭包是独立空间还是共享空间如何判断？
第一种情况说明多次调用外函数生成的不同闭包函数没有共享name变量
第二种情况说明外函数内部循环生成的多个内函数共享 i 局部变量
第三种情况说明a 、b为两个 不同闭包 函数，同一闭包函数 a 多次调用 共享 i 变量，a b之间不共享。
可以总结出记住三个闭包共享变量的原则
调用外函数，就会生成内函数和外函数的局部变量组成的闭包。每调用一次生成一个闭包函数。不同闭包函数之间内存空间彼此独立。
调用同一个闭包函数多次，共享内存空间，即外函数的局部变量值。
第二种情况for循环。没有调用外函数，只是将内函数存到了数组中，故并没有生成3个独立的闭包函数。而是3个内函数共享一个外函数局部变量，即3个内函数和外函数局部变量组成了一个整体的闭包环境。
简记：调用一次外函数，生成一个独立的闭包环境；外函数内部生成多个内函数，那么多个内函数共用一个闭包环境。
应用场景主要就两个
在内存中维持变量：如果缓存数据、柯里化
保护函数内的变量安全：如迭代器、生成器。
场景一：保存局部变量在内存中
闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。
因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。
在 Web 中，你想要这样做的情况特别常见。大部分我们所写的 JavaScript 代码都是基于事件的 — 定义某种行为，然后将其添加到用户触发的事件之上（比如点击或者按键）。我们的代码通常作为回调：为响应事件而执行的函数。
假如，我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定 body 元素的 font-size，然后通过相对的 em 单位设置页面中其它元素（例如header）的字号：
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}我们的文本尺寸调整按钮可以修改 body 元素的 font-size 属性，由于我们使用相对单位，页面中的其它元素也会相应地调整。
以下是 JavaScript：
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);size12，size14 和 size16 三个函数将分别把 body 文本调整为 12，14，16 像素。我们可以将它们分别添加到按钮的点击事件上。如下所示：
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
12
14
16 场景二：用闭包模拟私有方法，保护局部变量
编程语言中，比如 Java，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。
而 JavaScript 没有这种原生支持，但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。
下面的示例展现了如何使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为 模块模式（module pattern）：
var Counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
})();
console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */可以将上面的代码拆分成两部分：(function(){})和()。第1个()是一个表达式，而这个表达式本身是一个匿名函数，所以在这个表达式后面加 ()就表示执行这个匿名函数。
在之前的示例中，每个闭包都有它自己的词法环境；而这次我们只创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。
该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数 返回的三个公共函数访问。
这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。
你应该注意到我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量Counter。我们可以把这个函数储存在另外一个变量makeCounter中，并用他来创建多个计数器。
var makeCounter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */请注意两个计数器 Counter1 和 Counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。
每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。
以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。
在 ECMAScript 2015 引入 let 关键字 之前，在循环中有一个常见的闭包创建错误。参考下面的示例：