📺 同步视频 一键三连

www.bilibili.com/video/BV1gr…

365天打卡记录

🔥 创作不易、大家帮然叔 B栈 一键三连

• [如何利用闭包完成类库封装] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [谈谈闭包与即时函数的应用] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [分析一下箭头语法为什么不能当做构造函数] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [闭包与科里化、偏应用函数的关系] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [如何用闭包制造惰性函数?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [什么是闭包？如何产生闭包] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [new 一个构造函数，如果函数返回 return {} 、 return null ， return 1 ， return true 会发生什么情况？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [new 一个函数发生了什么？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [判断数据类型的方式有哪些？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [Number() 的存储空间是多大？如果后台发送了一个超过最大限制的数字怎么办?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [0.1 + 0.2 === 0.3 嘛？为什么？怎么解决？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [JS 整数是怎么表示的？] 📺 Billbill视频 📚 掘金文稿 🐱 Github

基本概念

好先介绍概念。

立即执行函数 IIFE

IIFE Immediately-Invoked Function Expressions

• 声明一个匿名函数

• 马上调用这个匿名函数

• 销毁该函数(因为语句结束，没有任何引用了)

  (function () {
    alert()
  })()
  

闭包经常会和闭包结合起来发挥巨大的作用

应用1 - 创建临时独立作用域

假设想创建一个累加器这样的功能，需要一个临时变量用于保存累加状态。放在全局作用域显然不太优雅，最简单的方法就是创建一个IIFE然后创建变量，返回一个函数，然后再函数中完成累加功能。

var n= 0
setInterval(() => console.log(++n), 1000)

setInterval((function() {
  var n = 0
  return function() {
    console.log(++n)
  }
})(), 1000)

应用二 - 解决变量名冲突

利用参数优先全局变量的规则，可以让函数内部的小环境内限制作用域变量名称。

比如: jquery会使用全局的$, 但是其他库也有可能使用$这个函数名，这样就会造成函数名冲突。

假定我们有大量存量代码使用$这个函数名调用jquery，我们不太可能全部改写这个代码。这时候其实使用即时函数就可以很好的解决这个问题。

<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script>
  // 假设其他库占用的$
  const $ = () => console.log("Not jQuery");
  (function ($) {
    // 通过闭包还是可以限制作用域的名称
    $(document).ready(function () {
      console.log("Hello jQuery");
    });
  })(jQuery);
  $()
</script>
​

应用三 - 使用简洁变量名

第三个作用类似with这个功能

// 一个复杂的变量
var data {
  abc : {
    efg : 0
  } 
}
​
(function() {
  console.log(v)
})(data.abc.efg)
​

应用四 - 循环陷阱

作为Javascript面试题八大陷阱题之一，我们下面看看循环陷阱是如何解决的。

const ary = [];
  for (var i = 0; i < 5; i++) {
    ary.push(function () {
      return console.log(i);
    });
  }
  ary[0]();
  ary[1]();

原因是由创建的函数引用外部变量形成闭包。所有的新创建的函数引用的都是同一个变量。而在调用函数时变量又都

循环内加入即时函数

由于即时函数的参数为实参复制关系，相当于复制的现场快照

const ary = [];
for (var i = 0; i < 5; i++) {
  (function(n) {·
    ary.push(function () {
      return console.log(n);
    });
  })(i)
}
ary[0]();
ary[1]();

应用五 - 类库包装

单独一讲、敬请期待

应用六 - webpack打包模块

单独一讲、敬请期待

面试攻略

• 无

点评

• 闭包处处都有，但是能说出经典应用又是一个难题。说Helloworld和背题没啥区别。

365天打卡记录

🔥 创作不易、大家帮然叔 B栈 一键三连

• [如何利用闭包完成类库封装] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [谈谈闭包与即时函数的应用] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [分析一下箭头语法为什么不能当做构造函数] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [闭包与科里化、偏应用函数的关系] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [如何用闭包制造惰性函数?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [什么是闭包？如何产生闭包] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [new 一个构造函数，如果函数返回 return {} 、 return null ， return 1 ， return true 会发生什么情况？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [new 一个函数发生了什么？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [判断数据类型的方式有哪些？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [Number() 的存储空间是多大？如果后台发送了一个超过最大限制的数字怎么办?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [0.1 + 0.2 === 0.3 嘛？为什么？怎么解决？] 📺 Billbill视频 📚 掘金文稿 🐱 Github
• [JS 整数是怎么表示的？] 📺 Billbill视频 📚 掘金文稿 🐱 Github