零. 媒介
从我最先打仗前端时就听说过闭包，然则一向不明白闭包终究是什么。上网看了种种博客，人人对闭包的说法不一。闭包在我明白是一种比较笼统的东西。所以我写了一篇博文来轻易本身明白闭包。博主是第一次写博文，假如在文章中有什么看不懂或许观点毛病的处所，请人人多多包涵和指出毛病。
一. 闭包的定义
再说闭包之前，起首让我们先来明白一下自在变量和束缚变量。
在程序设计言语中，变量可以分为自在变量与束缚变量两种。简朴来讲，一个函数里局部变量和参数都被认为是束缚变量；而不是束缚变量的则是自在变量。下面我们经由过程一个demo来说明注解。
var x = 10; // 相干于fn来讲，x是一个自在变量
function fn(){
var b = 20;
console.log( x + b ); // 30
}
fn();在上述例子中，相干于函数实例fn而言，x是一个自在变量，由于x并非fn的局部变量和参数。而b是fn的局部参数，所以b是fn的束缚变量。
那末如今我们可以解释一下闭包的第一个定义：
在计算机科学中，闭包是援用了自在变量的函数。
其实闭包不一定假如函数实例，也可以是代码块，只需满足可以保留变量在内存，同时有一些要领关于这些变量举行接见就好了。
所以，我们可以引伸出闭包的第二个定义：
闭包是由函数和与其相干的援用环境组合而成的实例，环境由闭包竖立时在作用域中的任何局部变量和参数构成。
闭包在运行时可以有多个实例，差别的援用环境和雷同的函数组合可以发生差别的实例。
// 例子1
function Person(){
var name,
age;
function init(name, age){
name = name;
age = age;
}
function show(){
console.log('name: %s, age: %d', name, age);
}
return {
init: init,
show: show
}
}
var eyesiM = Person.init('EyesiM', 22); // 闭包的实例1
var dcc = Person.init('Dcc', 20); // 闭包的实例2
eyesiM.show(); // name: EyesiM, age: 22
dcc.show(); // name: Dcc, age: 20
上面的变量eyesiM和变量dcc就是闭包的实例，个中变量eyesiM的环境中局部变量name和age的值为’EyesiM’和22；变量dcc的环境中的局部变量name和age的值为’Dcc’和20。
二. 闭包的运用
闭包可以用来在一个函数与一组“私有”变量之间竖立关联关联。在给定函数被屡次挪用的过程当中，这些私有变量可以保留在内存中。变量的作用域仅限于包括它们的函数，因而没法从除包括它们的函数以外举行接见。
1. 模块形式
在Java等等一些言语内里会有private关键字来将要领和变量声明为私有的，即它们只能被同一个类中的别的要领所挪用。
JavaScript不供应原生的支撑，然则可以运用闭包模仿私有变量和私有要领。私有变量可以限定对代码的接见；防止非中心的要领弄乱了代码的大众接口部份。
// 例子2
var demo = (function(){
// 模仿私有变量
var count = 0;
function show(){
console.log('count: %d', count++);
}
return {
show: show
}
})();
demo.show(); // 0
demo.count; // 我们不能直接援用，所以这里会返回undefined
在我明白，模块形式可以有两种用处：
马上挪用函数表达式（IIFE）：将我们本身的变量和要领封装起来，可以防止全局污染。例子2就是一个IIFE的例子。
引入依靠：我们可以引入对某一个全局对象的依靠，对这一个全局举行扩大。下面我们可以经由过程一个例子来示意。
// MODULE 就是一个全局对象，假如不存在就初始化为`{}`，我们运用局部参数my指向这个对象，接着我们给这个全局对象增加属性`method`，然后返回指向这个全局对象的援用。
var MODULE = (function (my) {
my.method = {
// add code
}
return my;
}(MODULE || {}));2. 循环中竖立闭包
在我们运用ES6的let关键字之前，闭包的一个常见问题就出如今循环中竖立闭包。
// 例子3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="apple">apple</div>
<div id="banana">banana</div>
<div id="orange">orange</div>
</body>
</html>
function showColor(item) {
console.log('id: %s, color: %s', item.id, item.color);
}
function addHTML() {
var colors = [{
id: 'apple',
color: 'red'
}, {
id: 'banana',
color: 'yellow'
}, {
id: 'orange',
color: 'orange'
}];
for (var i = 0, length = colors.length; i < length; i++) {
var item = colors[i];
// error
// 当我们把鼠标顺次移过id为'apple', 'banana', 'orange'的div时，控制台打印出的是
// id: orange, color: orange
// id: orange, color: orange
// id: orange, color: orange
// document.getElementById(item.id).onmouseover = function(){
// showColor(item);
// }
// success
// 当我们把鼠标顺次移过id为'apple', 'banana', 'orange'的div时，控制台打印出的是
// id: apple, color: red
// id: banana, color: yellow
// id: orange, color: orange
document.getElementById(item.id).onmouseover = function(item) {
return function() {
showColor(item);
};
}(item);
}
}
addHTML();三. 闭包的注重点
闭包防止了环境中的变量被当做渣滓接纳，因而运用闭包会使得闭包中的变量都被保留在内存中。
在平常的多页面中，我们封闭或重定向了页面以后，浏览器会自动接纳原页面所占用的资本，然则假如我们所做的项目是SPA的话，就需要考虑到内存的运用，所以一定要慎用闭包。
