前端提高篇（十九）JS进阶14闭包，百度最爱考的前端面试题

}// 全局

}

f();

e();//调用一次，计数一次

也可以有多个内部函数，操作外部函数的同一个变量

运行结果：

闭包究竟是什么？

概念：闭包是由函数以及创建该函数的语法环境组成的，这个环境包含了这个闭包创建时所能访问的所有局部变量

就像是有一个简易的类特性：

闭包操作可以看成闭包工厂和闭包对象构成；

由闭包工厂生成闭包对象，每个闭包对象互不干扰；

闭包对象中都存储着工厂给的局部变量，和一个函数，有一个指针指向闭包对象中的函数，使用这个函数；

闭包对象在内存中保存着，直到很长一段时间内都没有使用，系统自动回收；（所以那个x，没有在f函数执行结束之后就失效）

//闭包工厂（函数）

function f(){

var x = 1;

function e(){

x++;

console.log(x);

}

return e;

}

var f1 = f();//闭包对象1

var f2 = f();//闭包对象2

运行结果：执行了3次f1后，f1中x的值已经到了4，此时执行一次f2，打印出x的值为2，可以看出，两个闭包对象不干扰

常见错误：

场景：循环内使用同一个闭包对象，造成变量累加

• li1
• li2
• li3

• 运行结果：不论点击哪一个li，都是输出4

  

  解析：

  setClick函数满足了闭包的要素，里面的匿名函数使用了外部函数创建的变量i，上面代码的for循环，执行之后的结果是：

  

  可以看到，setClick函数执行后，i已经变成3，并且长存在内存中，所以当我们点击其中一个li，showId出来的，都是4

  我们可以通过两种办法解决这个问题

  方法一：使用闭包工厂创建多个闭包对象

  function showId(id){

  console.log(id);

  }

  function clickFunc(id){

  function e(){

  showId(id);

  }

  return e;

  }

  function setClick(){

  var ary = document.getElementsByTagName(‘li’);

  for (var i = 0; i < ary.length; i++){

  ary[i].onclick = clickFunc(i + 1);

  }

  }

  setClick();

  运行效果：

  

  

  方法二：使用立即执行函数，创建多个闭包对象

  function showId(id){

  console.log(id);

  }

  function setClick(){

  var ary = document.getElementsByTagName(‘li’);

  for (var i = 0; i < ary.length; i++){

  (function (){

  var id = i;

  ary[id].onclick = function(){

  showId(id + 1);

  }

  })();

  }

  }
  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  结尾

  正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

  以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

  戳这里免费领取前端学习资料

  端）**

  

  结尾

  正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

  以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

  戳这里免费领取前端学习资料