基本概念
好先介绍概念。
立即执行函数 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和背题没啥区别。
