闭包

阿南哥

闭包理解

如何产生闭包

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

闭包是什么

• 使用chrome调试查看
  
• 理解一 -- 闭包是嵌套的内部函数
  
• 理解二 -- 闭包是包含被引用变量（函数）的对象
  
• 闭包存在于嵌套的内部函数中
  
• 产生闭包的条件
  
• 函数嵌套
  
• 内部函数引用了外部函数的数据（变量或函数）
  

1. [/code][align=center][/align]
2. [size=5]常见闭包[/size]
4. 将函数作为另一个函数的返回值
5. [code]function fn1() {
6.     var a = 2;
7.     function fn2() {
8.         a++;
9.         console.log(a);
10.     }
11.     return fn2;
12. }
13. var f = fn1();
14. f();    //3--fn1的返回值是fn2--相当于调用了fn2()--相当于fn1()()
15. f();    //4--闭包不会消失--第一次fn1()执行时--闭包内的数据是3--第二次执行时就是4

复制代码

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

1. function showDelay(msg, time) {
2.     setTimeout(function () {
3.         console.log(msg);   //闭包
4.     }, time);
5. }
6. showDelay('zao', 2000);

复制代码

闭包的作用

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

问题

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

闭包的生命周期

• 产生--在嵌套内部函数定义执行完时就产生了
  
• 死亡--在嵌套内部函数成为垃圾对象时
  

1. function fn1(){
2.     // 闭包产生--函数提升--内部函数已经创建了
3.     var a = 2;
4.     function fn2(){
5.         a++;
6.         console.log(a);
7.     }
8.     return fn2;
9. }
10. //只要有变量引用fn1()闭包就一直存在
11. var f = fn1();
12. f();
13. f();
14. //闭包死亡--包含闭包的函数成为垃圾对象
15. f = null;

复制代码

闭包的应用

定义JS模块

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

1. //JS文件
2. function myMoudle() {
3.     var msg = 'zaoya';
4.     function doSomething() {
5.         //toUpperCase--字符串转换为大写
6.         console.log('doSomething()' + msg.toUpperCase());
7.     }
8.     function doOtherthing() {
9.         //toLowerCase--字符串转换为小写
10.         console.log('doOtherthing()' + msg.toLowerCase());
11.     }
12.     //向外暴露对象
13.     return {
14.         doSomething: doSomething,
15.         doOtherthing: doOtherthing
16.     }
17. }
19. //html文件

复制代码

1. //JS文件
2. (function myMoudle1() {
3.     let msg = 'zaozao';
4.     function doSomething() {
5.         console.log('doSomething()' + msg.toUpperCase);
6.     };
7.     function doOtherthing() {
8.         console.log('doOtherthing()' + msg.toLowerCase);
9.     }
10.     window.myMoudle1 = {
11.         doSomething: doSomething,
12.         doOtherthing: doOtherthing
13.     }
14. })()
16. //html文件

复制代码

闭包的缺点

缺点

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

解决

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

内存溢出

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

内存泄漏

• 占用的内存没有及时释放
  
• 内存泄漏积累多了就容易导致内存溢出
  

常见内存泄漏

• 意外的全局变量
  
• 没有及时清理的计时器或回调函数
  
• 闭包
  

面试题

1. var name = 'The Window';
2. var object = {
3.     name: 'My Object',
4.     getNameFunc: function () {
5.         return function () {
6.             return this.name;
7.         }
8.     }
9. }
10. //object.getNameFunc()--是对象调用--通过object调用--this为object
11. //通过object.getNameFunc()--调用函数--object.getNameFunc()()--是函数调用--this为window
12. alert(object.getNameFunc()());  //The Window
13. var name2 = 'The Window';
14. var object = {
15.     name2: 'My Object',
16.            var that = this;
17.         return function () {
18.             return that.name2;
19.         }
20.     }
21. }
22. //object.getNameFunc()--是对象调用--通过object调用--this为object
23. //object.getNameFunc()()--中that是object.getNameFunc()的this--指向object
24. alert(object.getNameFunc()())       //My Object

复制代码

来源:https://www.cnblogs.com/Liu-h/p/17352722.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！