转载地址：https://www.cnblogs.com/wdlhao/p/5623957.html
1、什么是闭包
- 闭包：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。闭包就是能够读取其他函数内部变量的函数;闭包简单理解成“定义在一个函数内部的函数”。如下便是一个闭包：
function init() {
var name = "Mozilla"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数，一个闭包
alert(name); // 使用了父函数中声明的变量
}
return displayName();
}
var myFunc = init();
myFunc();- 闭包的形式：即内部函数能够使用它所在级别的外部函数的参数，属性或者内部函数等，并且能在包含它们的外部函数之外被调用，就会形成闭包。
- 理解闭包相关联的几个重要概念：变量作用域、作用域链、垃圾回收机制、函数嵌套等。
- 变量作用域：变量的作用域es6之前有两种：全局变量和局部变量。es6之后又添加了块级作用域。
- 作用域链：是指在函数定义时创建，用于查找使用到的变量值的索引。当函数需要查询到一个变量值的时候，js解释器会从本地变量开始向上查找直到全局变量，找到则返回；没有找到，返回undefined。
- 垃圾回收机制：
1、当函数在执行过程中，内部定义的变量一般会被保存在内存空间当中。当函数执行完毕后，内存会被清空，变量会被销毁。
2、如果出现内部函数有使用到外部定义变量的情况，js解释器会把内部函数和他用到的变量一起保存起来，从而形成了闭包。这种变量不会被内存回收机制回收，直到内部函数被删除后，闭包才销毁，用到的变量也会销毁。
- 函数嵌套：嵌套函数，就是指在某些情况下，您可能需要将某函数作为另一函数的参数使用。
C语言中函数的定义都是相互平行、相互独立的，也就是说在函数定义时，函数体内不能包含另一个函数的定义，即函数不能嵌套定义，但可以嵌套调用。
嵌套函数，就是指在某些情况下，您可能需要将某函数作为另一函数的参数使用，这一函数就是嵌套函数。在一个函数被调用的过程中又调用另一个函数，这就是函数的嵌套调用。如果是函数本身嵌套调用函数本身，那就是函数递归调用了。
2、变量的作用域
要理解闭包，首先要理解变量的作用域。
变量的作用域es6之前有两种：全局变量和局部变量。es6之后又添加了块级作用域。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量，但是在函数外部无法读取函数内的局部变量。
其中内部函数中可以访问外部函数的变量，是因为内部函数的作用域链中包含了外部函数的作用域；
也可以理解为：内部函数的作用范围辐射到了外部函数的作用范围；
var n=999;
function f1(){
alert(n);
}
f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。
function f1(){
var n=999;
}
alert(n); // Uncaught ReferenceError: n is not defined
这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
function f1(){
n=999;
}
f1();
alert(n); // 9993、闭包的几种写法和用法
3.1、给函数添加一些属性
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area()); //3.141593.2、声明一个变量，将一个函数当作值赋给变量
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) ); //3.141593.3、这种方法使用较多，也最为方便。var obj = {}就是声明一个空的对象
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );//3.141594、闭包的主要作用
闭包的主要作用有两个:一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
4.1、从外部读取局部变量
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 9994.2、将变量的值始终保存在内存当中
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
4.3、工厂函数应用
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
在这个示例中，我们定义了
makeAdder(x)函数，它接受一个参数x，并返回一个新的函数。返回的函数接受一个参数y，并返回x+y的值。从本质上讲，
makeAdder是一个函数工厂 — 他创建了将指定的值和它的参数相加求和的函数。在上面的示例中，我们使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和，另一个和 10 求和。
add5和add10都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。在add5的环境中，x为 5。而在add10中，x则为 10。（此处摘自MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures）
css中的是以像素为单位指定 body 元素的 font-size，然后通过相对的 em 单位设置页面中其它元素（例如header）的字号。就是利用了工厂函数的思想。
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}假如，我们想在页面上添加一些可以调整字号的按钮。通过js工厂函数的方式实现：
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);4.3、用闭包模拟私有方法
私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。
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 */在之前的示例中，每个闭包都有它自己的词法环境；而这次我们只创建了一个词法环境，为三个函数所共享：
Counter.increment，Counter.decrement和Counter.value。该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为
privateCounter的变量和名为changeBy的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。（此处摘自MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures）
以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。
5、闭包与this对象
在闭包中使用this对象可能会导致一些问题。因为匿名函数的执行具有全局性，因此其this对象通常指向window。通过存储本地变量，利用return返回匿名函数的方法，来获取或更新外层变量。代码如下：
var name = "The window";
var object = {
name:"My object",
getNameFun:function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFun()()); //"The window"（在非严格模式下）把外部作用域中的this对象保存在一个闭包能够访问的变量里面，就可以让闭包访问该对象了。通过设置变量that来进行变量转移，将全局变量转移到内部变量。代码如下：
var name = "The window";
var object = {
name:"My object",
getNameFun:function(){
var that = this;//用that变量来指代全局变量
return function(){
return that.name;
};
}
};
alert(object.getNameFun()()); //“My object”让内部函数在循环创建的时候立即执行，并且捕捉当前的索引值,然后记录在自己的一个本地变量里。然后利用返回函数的方法，重写内部函数，让下一次调用的时候，返回本地变量的值。
var result = [];
function foo(){
for (var i=0;i<3;i++){
result[i] = (function(j){
return function(){
alert(j);
};
})(i);//(function(){}()),内部函数通过将变量i保存到本地，赋值给j,通过return返回匿名函数，重写内部函数。
}
};
foo();
result[0](); // 0
result[1](); // 1
result[2](); // 2此处也可以不用立即执行函数传参的方式，可以将变量i用let来声明，也可以实现相同的效果。
var result = [];
function foo(){
for (let i=0;i<3;i++){
result[i] = (function(){
return function(){
alert(i);
};
})()
}
};
foo();
result[0](); // 0
result[1](); // 1
result[2](); // 26、闭包与内存泄露
具体来说，如果闭包的作用域中保存着一个HTML元素，那么就意味着该元素无法被销毁。如下：
function assignHandler(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
}
}以上代码创建了一个作为element元素事件处理程序的闭包，而这个闭包则又创建了一个循环引用。由于匿名函数保存了一个对assignHandler()的活动对象的引用，因此会导致无法减少element的引用数。只要 匿名函数存在，element的引用数至少也是1，因此他所占用的内存就不会被回收。
通过改写代码来解决内部不能回收问题：
function assignHandler(){
var element = document.getElementById("someElement");
var id = element.id;
element.onclick = function(){
alert(id);
}
element = null;
}以上代码，实现闭包不直接引用element,包含函数的活动对象中也仍然会保存一个引用。因此，有必要把element的变量设置为null，这样就可以正常回收其占用的内存。
7、闭包的缺点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
例如，在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时，方法都会被重新赋值一次（也就是说，对于每个对象的创建，方法都会被重新赋值）。
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}在上面的代码中，我们并没有利用到闭包的好处，因此可以避免使用闭包。修改成如下：
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype.getName = function() {
return this.name;
};
MyObject.prototype.getMessage = function() {
return this.message;
};
2）闭包会在父函数外部改变父函数内部变量的值。如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
