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