一、闭包简介
1、函数内部的函数可以生成闭包
2、闭包的应用：需要多个内部变量值
3、闭包弊端
闭包：会倒致函数运行结束后，局部变量空间不会被释放。从而造成内存泄漏。
二、对象、函数
1、对象引用（引用地址）：数组里的两个a是同一个a
var a = {name:"张三",age:18};
var arr = [];
arr.push(a);
arr.push(a);
// a 发生变化后，数组内部也会改变
a.name = "李四";
console.log(arr);
console.log(arr[0] == arr[1]); //true
屏幕快照 2017-10-10 下午7.59.57.png
2、函数 t 运行两次，每运行一次，空间就被收回，是两个不同的a。其值被保存在 arr 中
var arr = [];
function t(){
var a = {name:"张三", age:18};
arr.push(a);
}
t();
t();
arr[0].name = "李四";
console.log(arr);
console.log(arr[0] == arr[1]); //false
屏幕快照 2017-10-10 下午8.10.10.png
三、闭包
1、执行同一次函数 ，变量 a 相同
var arr = [];
function t(){
var a = {name:"张三", age:18};
arr.push(a);
arr.push(a);
}
t();
arr[0].name = "李四";
console.log(arr);
console.log(arr[0] == arr[1]); //true
屏幕快照 2017-10-10 下午8.17.56.png
2、外部函数执行两次，f1 与 f2 中的a 不是同一个a
function fna(){
var a = 10;
return function(){
console.log(++a);
}
}
var f1 = fna();
var f2 = fna();
console.log(f1 == f2); //执行两次函数，false
// 闭包：调用f1生成的都是一个a，会保存a的值，所以a会自增。
f1();
f1();
f1();
f1();
f1();
// 调用f2 生成的不是一个a，值为 11
f2();
屏幕快照 2017-10-10 下午8.21.18.png
3、全局变量 i，f1、f2 中的i为同一个i
var i = 100;
function fna(){
return function(){
console.log(++i);
}
}
var f1 = fna();
var f2 = fna();
f1();
f1();
f1();
f1();
f1();
f2();
屏幕快照 2017-10-10 下午8.27.26.png
4、
// 外部函数运行一次，内部的函数形成闭包，会保存a的值，in1与in2是指一个a
// 只生成一个局部变量和参数
function fn(){
var a = 10;
function in1(){
console.log(++a);
}
function in2(){
console.log(++a);
}
return [in1, in2];
}
var arr = fn();
var f1 = arr[0];
var f2 = arr[1];
f1();
f1();
f1();
f1();
f1();
f2();
屏幕快照 2017-10-10 下午8.29.53.png
5、
// 传参,外层函数只调用一次，内部num指同一个
function fn(num){
var a = 10;
function in1(){
console.log(++num);
}
function in2(){
console.log(++num);
}
return [in1, in2];
}
var arr = fn(100);
var f1 = arr[0];
var f2 = arr[1];
f1();
f1();
f1();
f1();
f1();
f2();
屏幕快照 2017-10-10 下午9.13.48.png
四、闭包的应用
原来写点击div打印对应下标
var itemS = document.getElementsByClassName('item');
for(var i=0;i<itemS.length;i++){
// 自定义属性，保存div对应下标值
itemS[i].index = i;
itemS[i].onclick = function(){
// 时间函数，指向Windows，在未调用前，将指向保存在变量 _this中
var _this = this;
setTimeout(function(){
console.log(_this.index);
},1000);
}
}
可以利用闭包解决：利用闭包保存的是一个局部变量/参数
1、函数包裹，并调用（利用闭包保存的是一个局部变量）
for(var i=0;i<itemS.length;i++){
function t(){
var a = i;
itemS[i].onclick = function(){ //点击时，闭包会保存a的值
setTimeout(function(){ //没有用到this、的window指向。可直接使用。
console.log(a);
},1000);
}
}
t();
}
2、解决方法：匿名函数自执行 包裹（利用闭包保存的是一个局部变量）
(function(){})()
函数t里的点击方法会形成闭包。随着for循环运行10次，函数t也会运行10次。每次t运行时，都会有一个变量a。然后每一个闭包保存了函数t运行的时候的变量a。
var itemS = document.getElementsByClassName('item');
for(var i=0;i<itemS.length;i++){
// 自定义属性，保存div对应下标值
(function(){
// 函数嵌套函数，形成闭包。a共有10个值，且空间不会被回收
var a = i;
itemS[i].onclick = function(){
setTimeout(function(){
console.log(a);
},1000);
}
})()
}
3、利用闭包里保存的是一个参数
for(var i=0;i<itemS.length;i++){
(function(i){ //i舍去，为全局变量。i变量只能保存一个值，打印出来一直为9
itemS[i].onclick = function(){
setTimeout(function(){
console.log(i); //
},1000)
}
})(i); //i 舍去，不传参。结果为undefind。打印时会报错
}