每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day11

tags: ItIron2021 Javascript

前言

昨天我们简单的带过IIFE，今天的主题则比较刁钻一些，会用到我们之前谈过的许多观念，也是很多面试者心目中的大魔王，但实际上并没有这麽复杂! 我们马上开始吧!

本日题目与解释

请解释什麽是闭包(closure)

防雷图来罗~!

没错，终究是逃不过这一关的! 我们昨天有稍微带到这个关键字，这个观念关系到js底层是如何运作的，但理解後其实也不是真这麽困难，若要用一句话来说的话，我会给出以下的解释。

• 闭包就是函数本身以及他所参照的环境(lexical environment)

也就是不仅是函数本身，函数本身参照外部参数的行为就会制造出闭包，看个常见的例子

function demo() {
  let name = 'Danny'
  return function() {
    console.log(`Hello, my name is ${name}`)
  }
}

const demoFunc = demo()
demoFunc() // Hello, my name is Danny

上述就是闭包的典型范例，很多人会说闭包就是function return function，但实际上只要你的函数有参照到外部的参数就会形成闭包，例如这样的做法也会产生一个闭包

let b = 5

function add(a) {
  return a + b
}

闭包与一般函数的差别在於，一般函数中的变数在执行後就会从stack memory中消失，但由於闭包会需要不断的参照外在环境的参数(以上方的例子来说就是b)，他需要把那个参照的变数存在更长久保存的heap memory中不断地引用，直到未来被js本身的垃圾回收机制处理掉。

既然闭包使用这麽麻烦，我们会什麽会需要闭包呢?

很好的问题，就像昨天提过的，遇到这样的定义问题时，知道它是什麽远远不够，最好是能给出一些为什麽需要它的理由或是一些实际的范例。js其实在很多你平常的使用中就有不断用到闭包的概念，只是你没有注意到而已，其中最主要的优势为

• 资料封装(Data encapsulation)

藉由闭包你可以将一些函数或是变数私有化，让它变得无法被外在的环境影响，藉由在闭包内创造一个私有的state，你可以确保这个变数、函数不会被预期之外的程序码操作。

当然实际上闭包还有一些眉眉角角，有兴趣的朋友别忘了作进一步的搜寻! 很多面试题目也经常会用到闭包的概念，例如一个万恶的setTimeOut题目

for (var i = 1; i <= 5; i++) {
  setTimeout(()=> {
    console.log(i)
  }, 100)
}

最终的输出结果是5个6，你也许知道把var改为let就可以轻松印出目标的1~5，但...实际上这就是善用闭包的特性才能达到的，同时参照外部环境的行为是基於scope的特性，这你知道吗??

本日核心观念与总结

核心观念

闭包(closure)、scope

总结

• 能简单说明何谓闭包
• 了解闭包的主要优点

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!