闭包
闭包理解如何产生闭包
[*]当一个嵌套的内部（子）函数引用了嵌套外部（父）函数的变量（函数）时--就产生了闭包
闭包是什么
[*]使用chrome调试查看
[*]理解一 -- 闭包是嵌套的内部函数
[*]理解二 -- 闭包是包含被引用变量（函数）的对象
[*]闭包存在于嵌套的内部函数中
[*]产生闭包的条件
[*]函数嵌套
[*]内部函数引用了外部函数的数据（变量或函数）
常见闭包
将函数作为另一个函数的返回值
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文件//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文件闭包的缺点
缺点
[*]函数执行完后--函数内的局部变量没有释放--占用内存时间会变长
[*]容易造成内存泄漏
解决
[*]能不用闭包就不用闭包
[*]及时释放
内存溢出
[*]一种程序运行出现的错误
[*]当程序运行需要的内存超过了剩余的内存时--就会抛出内存溢出的错误
内存泄漏
[*]占用的内存没有及时释放
[*]内存泄漏积累多了就容易导致内存溢出
常见内存泄漏
[*]意外的全局变量
[*]没有及时清理的计时器或回调函数
[*]闭包
面试题
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
来源:https://www.cnblogs.com/Liu-h/p/17352722.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]