前端百题斩——用“闭包”问题征服面试官

13.1 定义

在JavaScript中，根据词法作用域的规则，内部函数总是可以访问其外部函数声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，就把这些变量的集合称为闭包。

13.2 闭包实现

在一个函数中嵌套另一个函数或者将一个匿名函数作为值传入另一个函数中。

 
 
 
 
    
  
  
  
  
  1. // 函数fun1中嵌套了fun2，fun2作为参数返回，外部调用时仍能打印val1，构成闭包 
    2.   
  
  
  
  2. function fun1() { 
    3.   
  
  
  
  3.     const val1 = 10; 
    4.   
  
  
  
  4.     function fun2() { 
    5.   
  
  
  
  5.         console.log(val1); 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.     return fun2; 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. function fun3() { 
    12.   
  
  
  
  12.     const val2 = 20; 
    13.   
  
  
  
  13.     // 定时器中的为一个匿名函数，其作为参数传入了，函数fun3执行完毕之后，1s钟后才会执行定时器函数，但此时还能打印val2，构成闭包 
    14.   
  
  
  
  14.     setTimeout(function() { 
    15.   
  
  
  
  15.         console.log(val2); 
    16.   
  
  
  
  16.     }, 1000); 
    17.   
  
  
  
  17. } 
    18.

13.3 流程

根据下面的函数来看看闭包的整个执行流程

 
 
 
 
    
  
  
  
  
  1. function main() { 
    2.   
  
  
  
  2.     const val1 = 20; 
    3.   
  
  
  
  3.     var val2 = 2 
    4.   
  
  
  
  4.     function valResult() { 
    5.   
  
  
  
  5.         return val1 * val2; 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.     return valResult; 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. var result = main(); 
    12.   
  
  
  
  12. console.log(result()); // 40 
    13.

上图中展示了各个时期的调用栈，需要重点关注以下几点：

  1. 当main函数执行完毕后，main函数的执行上下文从栈顶弹出;
  2. 返回的方法(valResult)中调用了main函数中的val1和val2变量，这两个变量就会打包成closure闭包，加到[[scopes]];
  3. 调用返回的方法时，作用域链为：result函数作用域——Closure(main)——全局作用域

13.4 优缺点

优点

(1)可以重复使用变量，并且不会造成变量污染;

(2)可以用来定义私有属性和私有方法

缺点

(1)会产生不销毁的上下文，导致栈/堆内存消耗过大

(2)会造成内存泄露。

扩展：闭包是怎么回收的?

  1. 如果闭包引入的函数是一个全局变量，那么闭包会一直存在直到页面关闭;但如果这个闭包以后不再使用的话，就会造成内存泄露;
  2. 如果引用闭包的函数是一个局部变量，等函数销毁后，在下次JavaScript引擎执行垃圾回收时，判断闭包内容已经不再被使用，则js引擎的垃圾回收器就会进行回收。

13.5 用途

闭包用途主要有以下两个：

创建私有变量

 
 
 
 
    
  
  
  
  
  1. function MyName(name) { 
    2.   
  
  
  
  2.     return { 
    3.   
  
  
  
  3.         getName() { 
    4.   
  
  
  
  4.             return name; 
    5.   
  
  
  
  5.         } 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. const myName = MyName('lili'); 
    10.   
  
  
  
  10. // 只能通过getName访问对应的名字，别的方式访问不到 
    11.   
  
  
  
  11. console.log(myName.getName()); // lili 
    12.

作为回调函数。当把函数作为值传递到某处，并在某个时刻进行回调的时候就会创建一个闭包。例如定时器、DOM事件监听器、Ajax请求。

 
 
 
 
    
  
  
  
  
  1. function fun(name) { 
    2.   
  
  
  
  2.     setTimeout(() => { 
    3.   
  
  
  
  3.         console.log(name); 
    4.   
  
  
  
  4.     }, 1000); 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. fun('linlin'); 
    8.

13.6 经典闭包问题

多个子函数的[[scope]]都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。

 
 
 
 
    
  
  
  
  
  1. for (var i = 1; i < 5; i++) { 
    2.   
  
  
  
  2.     setTimeout(() => console.log(i), 1000); 
    3.   
  
  
  
  3. } 
    4.

上述代码本意是输出1、2、3、4,但结果却是四个5，为了解决该问题，主要有三种办法。

变量可以通过 函数参数的形式 传入，避免使用默认的[[scope]]向上查找

 
 
 
 
    
  
  
  
  
  1. for (var i = 1; i < 5; i++) { 
    2.   
  
  
  
  2.     (function(i) { 
    3.   
  
  
  
  3.         setTimeout(() => console.log(i), 1000); 
    4.   
  
  
  
  4.     })(i); 
    5.   
  
  
  
  5. } 
    6.

使用setTimeout包裹，通过第三个参数传入。(注：setTimeout后面可以有多个参数，从第三个参数开始其就作为回掉函数的附加参数)

 
 
 
 
    
  
  
  
  
  1. for (var i = 1; i < 5; i++) { 
    2.   
  
  
  
  2.     setTimeout(value => console.log(value), 1000, i); 
    3.   
  
  
  
  3. } 
    4.

使用 块级作用域，让变量成为自己上下文的属性，避免共享

 
 
 
 
    
  
  
  
  
  1. for (let i = 1; i < 5; i++) { 
    2.   
  
  
  
  2.     setTimeout(() => console.log(i), 1000); 
    3.   
  
  
  
  3. } 
    4.

本文转载自微信公众号「执鸢者」，可以通过以下二维码关注。转载本文请联系执鸢者公众号。

网站题目：前端百题斩——用“闭包”问题征服面试官
分享地址：http://www.shufengxianlan.com/qtweb/news45/452895.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

做网站知识

同城分类信息

成都网站制作　　 　成都App定制　　 　LED网站设计方案　　 　全网营销推广　　 　不锈钢防护栏　　 　南京护栏钻孔机　　 　成都网络公司　　 　成都网站建设　　 　成都微信开发　　 　成都网页设计　　 　上海除甲醛　　 　成都广告制作　　 　品牌网站建设　　 　网页设计　　 　全网营销　　 　德阳机房托管　　 　网创优客　　 　雕琢时光　　 　四川成都托管服务器　　 　雅安服务器托管