JS 闭包

JS 闭包

一、如何产生闭包？

• 当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包；

二、闭包到底是什么？

• 理解一：闭包是嵌套的内部函数；
• 理解二：包含被引用变量（函数）的对象；
• 注意：闭包存在于嵌套的内部函数中；

三、产生闭包的条件？

• 函数嵌套；
• 内部函数引用了外部函数的数据（变量 / 函数）；

四、常见的闭包

• 将函数作为另一个函数的返回值；

//只产生了一个闭包;因为fn1只执行了一次
function fn1() {
	var a = 2;
	function fn2() {
		a++;
		console.log(a);
	}
	return fn2;
}
var f = fn1();//这里返回了fn2；产生了闭包
f();// 3;这里执行的fn2的代码
f();// 4

• 将函数作为实参传递给另一个函数调用；

function showDelay(msg, time) {
	setTimeout(function() {
		alert(msg);
	}, time);
}
showDelay("hello", 2000);

五、闭包的作用

• 使函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）；
• 让函数外部可以操作（读写）到函数内部的数据（变量 / 函数）；

问题：

• 函数执行完后，函数内部生命的局部变量是否还存在？
  一般是不存在的，但存在于闭包中的变量才可能存在。
• 在函数外部能直接访问函数内部的局部变量吗？
  不能，但我们可以通过闭包让外部操作它。

六、闭包的生命周期

• 产生：在嵌套内部函数定义执行完时就产生了（不是在调用时）；
• 死亡：在嵌套的内部函数成为垃圾对象时；

//只产生了一个闭包;因为fn1只执行了一次
function fn1() {
	//此时闭包就已经产生了（函数提升，内部函数对象已经创建了）
	var a = 2;
	function fn2() {
		a++;
		console.log(a);
	}
	return fn2;
}
var f = fn1();//这里返回了fn2；产生了闭包
f();// 3;这里执行的fn2的代码
f();// 4
f = null; // 闭包死亡（包含闭包的函数对象成为了垃圾对象）

七、闭包的应用：自定义JS模块

JS模块：

• 具有特定功能的js文件；
• 将所有的数据和功能都封装在一个函数内部（私有的）；
• 只向外暴露一个包含n个方法的对象或函数；
• 模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能；
  第一种
  js文件：

function myModule() {
	var msg = "hello";
	function doSomething() {
		console.log(msg.toUpperCase());
	};
	function doOtherthing() {
		console.log(msg.toLowerCase());
	}
	//return doSomething;//向外暴露一个函数
	//暴露多个函数
	return {
		doSomething:doSomething,
		doOtherthing:doOtherthing
	};
}

调用：

var module = MyModule();
module.doSomething();
module.doOtherthing();

第二种
js文件：

(function(w) {
	//私有数据
	var msg = "hello";
	//操作数据的函数
	function doSomething() {
		console.log(msg.toUpperCase());
	};
	function doOtherthing() {
		console.log(msg.toLowerCase());
	};
	//向外暴露对象（给外部使用的方法）
	w.myModule = {
		doSomething:doSomething,
		doOtherthing:doOtherthing
	};
})(window)

调用：

myModule.doSomething();
myModule.doOtherthing();

八、闭包的缺点及解决

1. 缺点

• 函数执行完后，函数内的局部变量没有释放，占用内存时间会变长；
• 容易造成内存泄漏；

2. 解决

• 能不用闭包就不用；
• 及时释放；

function fn1() {
	var arr = new Array[100000];
	function fn2() {
		console.log(arr.length);
	};
	return fn2;
}
var f = fn1();
f();
f = null; //让内部函数成为垃圾对象，回收闭包

九、内存溢出与内存泄漏

1. 内存溢出

var obj = {};
for(var i=0; i<10000; i++) {
	obj[i] = new Array(10000000);
	console.log("---");
}

• 一种程序运行出现的错误；
• 当程序运行需要的内存超过了剩余的内存时，就会抛出内存溢出的错误；

2. 内存泄漏

• 占用的内存没有及时释放；
• 内存泄漏积累多了就容易导致内存溢出；
• 常见的内存泄漏：
  • 意外的全局变量；

function fn() {
	a = new Array(10000000);
	console.log(a);
}
fn();

* 没有及时清理的计时器或回调函数；

var intervalId = setInterval(function() {
	console.log("---");
}, 1000);
//clearInterval(intervalId)

* 闭包；

function fn1() {
	var a = 4;
	function fn2() {
		console.log(++a);
	};
	return fn2();
};
var f = fn1();
f();
//f = null;

十、扩展

测试一：

//没有闭包；函数嵌套，但内部函数没有引用外部函数的变量
var name = "The Window";
var object = {
	name: "My Object",
	getNameFunc: function() {
		return function() {
			return this.name;
		};
	}
};
//object.getNameFunc()()--->fun(),相window调用
alert(object.getNameFunc()());// The Window

测试二：

//有闭包；函数嵌套，内部函数引用外部函数的变量that
var name = "The Window";
var object = {
	name: "My Object",
	getNameFunc: function() {
		var that = this;//这里的this是object，object调用了getNameFunc
		return function() {
			return that.name;
		};
	}
};
//
alert(object.getNameFunc()());// My Object

测试三：

function fun(n,o) {
	console.log(o);
	return {
		fun: function(m) {
			return fun(m, n);
		}
	};
}
var a = fun(0);// undefined(产生闭包)
a.fun(1);// 0
a.fun(2);// 0
a.fun(3);// 0
var b = fun(0).fun(1).fun(2).fun(3);// undefined 0 1 2
var c = fun(0).fun(1);// undefined 0
c.fun(2);// 1
c.fun(3);// 1