闭包理解
如何产生闭包
- 当一个嵌套的内部（子）函数引用了嵌套外部（父）函数的变量（函数）时--就产生了闭包
闭包是什么
-
使用chrome调试查看
-
理解一 -- 闭包是嵌套的内部函数
-
理解二 -- 闭包是包含被引用变量（函数）的对象
-
闭包存在于嵌套的内部函数中
-
产生闭包的条件
-
函数嵌套
-
内部函数引用了外部函数的数据（变量或函数）
<script>
function fn1() {
var a = 3;
function fn2() {
console.log(a);
}
fn2();
}
fn1();
</script>
常见闭包
将函数作为另一个函数的返回值
function fn1() {
var a = 2;
function fn2() {
a++;
console.log(a);
}
return fn2;
}
var f = fn1();
f(); //3--fn1的返回值是fn2--相当于调用了fn2()--相当于fn1()()
f(); //4--闭包不会消失--第一次fn1()执行时--闭包内的数据是3--第二次执行时就是4
将函数作为实参传递给另一个函数调用
function showDelay(msg, time) {
setTimeout(function () {
console.log(msg); //闭包
}, time);
}
showDelay('zao', 2000);
闭包的作用
-
使用函数内部的变量在函数执行完后--仍然存活在内存中--延长了局部变量的生命周期
-
让函数外部可以操作（读写）到函数内部的数据--变量/函数
问题
- 函数执行完--函数内部声明的局部变量是否还存在--一般不存在，存在于闭包中的变量才可能存在
- 在函数外部能直接访问函数内部的局部变量吗--不能，但可以通过闭包让外部操作它
闭包的生命周期
- 产生--在嵌套内部函数定义执行完时就产生了
- 死亡--在嵌套内部函数成为垃圾对象时
function fn1(){
// 闭包产生--函数提升--内部函数已经创建了
var a = 2;
function fn2(){
a++;
console.log(a);
}
return fn2;
}
//只要有变量引用fn1()闭包就一直存在
var f = fn1();
f();
f();
//闭包死亡--包含闭包的函数成为垃圾对象
f = null;
闭包的应用
定义JS模块
- 具有特定功能的js文件
- 将所有数据和功能都封装在一个函数内部--私有
- 只向外暴露一个包含n个方法的对象或函数
- 模块的使用者--只需通过模块暴露的对象调用方法来实现对应的功能
//JS文件
function myMoudle() {
var msg = 'zaoya';
function doSomething() {
//toUpperCase--字符串转换为大写
console.log('doSomething()' + msg.toUpperCase());
}
function doOtherthing() {
//toLowerCase--字符串转换为小写
console.log('doOtherthing()' + msg.toLowerCase());
}
//向外暴露对象
return {
doSomething: doSomething,
doOtherthing: doOtherthing
}
}
//html文件
<script src="myMoudle.js"></script>
<script>
let fn = myMoudle();
fn.doSomething();
fn.doOtherthing();
</script>
//JS文件
(function myMoudle1() {
let msg = 'zaozao';
function doSomething() {
console.log('doSomething()' + msg.toUpperCase);
};
function doOtherthing() {
console.log('doOtherthing()' + msg.toLowerCase);
}
window.myMoudle1 = {
doSomething: doSomething,
doOtherthing: doOtherthing
}
})()
//html文件
<script src="myMoudle1.js"></script>
<script>
myMoudle1.doSomething();
myMoudle1.doOtherthing();
</script>
闭包的缺点
缺点
- 函数执行完后--函数内的局部变量没有释放--占用内存时间会变长
- 容易造成内存泄漏
解决
- 能不用闭包就不用闭包
- 及时释放
内存溢出
- 一种程序运行出现的错误
- 当程序运行需要的内存超过了剩余的内存时--就会抛出内存溢出的错误
内存泄漏
- 占用的内存没有及时释放
- 内存泄漏积累多了就容易导致内存溢出
常见内存泄漏
- 意外的全局变量
- 没有及时清理的计时器或回调函数
- 闭包
面试题
var name = 'The Window';
var object = {
name: 'My Object',
getNameFunc: function () {
return function () {
return this.name;
}
}
}
//object.getNameFunc()--是对象调用--通过object调用--this为object
//通过object.getNameFunc()--调用函数--object.getNameFunc()()--是函数调用--this为window
alert(object.getNameFunc()()); //The Window
var name2 = 'The Window';
var object = {
name2: 'My Object',
var that = this;
return function () {
return that.name2;
}
}
}
//object.getNameFunc()--是对象调用--通过object调用--this为object
//object.getNameFunc()()--中that是object.getNameFunc()的this--指向object
alert(object.getNameFunc()()) //My Object