「前端每日一问(30)」闭包和立即执行函数IIFE的关系

287 阅读2分钟

Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情

本题难度:⭐ ⭐

答:

立即执行函数经常用于闭包中,可以让闭包的实现少写一点代码。

在阅读本文之前,最好先理解这篇文章的内容:

「前端每日一问(28)」说说你对闭包的理解

立即执行函数概念

立即执行函数的特点是:

  • 声明一个匿名函数
  • 马上调用这个匿名函数
  • 销毁这个匿名函数
(function () {
  let name = '阿林'
  console.log(name)
})()

等同于

function fn() {
  let name = '阿林'
  console.log(name)
}
fn()

可以看到,立即执行函数就是把一段代码给包裹进一个匿名函数里,然后立即执行这段代码逻辑,和声明一个函数,把代码逻辑写进这个函数里,再调用这个函数,效果是一样的。

函数最大的作用有两个:

  • 封装代码,复用
  • 有函数作用域,可以隔离变量

很显然,立即执行函数无法复用,那么立即执行函数的作用就是:

  • 简化代码,不用先封装,再调用,不用起函数名
  • 有函数作用域,可以隔离变量

和闭包结合

网络上很多文章经常把立即执行函数和闭包的概念混合在一起,的确,立即执行函数和闭包这俩兄弟很多时候都是结合在一起出现的,难免会造成误会。

实际上立即执行函数的作用就是让闭包的实现少写一点代码而已,比如下面这个例子:

// 不用立即执行函数
function sayName () {
  const name = '阿林'
  return function () {
    console.log(name)
  }
}

const fn = sayName()
fn() // 输出 '阿林'
// 用立即执行函数
const fn = (function () { // 直接写匿名函数,不用起函数名
  const name = '阿林'
  return function () {
    console.log(name)
  }
})()

fn() // 输出 '阿林'

image.png

image.png

用不用立即执行函数,都可以实现闭包,把变量 name 藏起来,全局访问不到。

结尾

如果我的文章对你有帮助,你的👍就是对我的最大支持^_^

你也可以关注《前端每日一问》这个专栏,防止失联哦~

我是阿林,输出洞见技术,再会!

上一篇:

「前端每日一问(29)」JS 中执行栈是什么?

下一篇:

「前端每日一问(31)」如何用闭包设计一个缓存模块?