Skip to main content

JS 的闭包是什么?怎么用?

概念题,「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」

是什么

闭包是 JS 的一种语法特性。

闭包 = 函数 + 自由变量

对于一个函数来说,变量分为:全局变量、本地变量、自由变量

怎么做

 let count
function add (){ // 访问了外部变量的函数
count += 1
}

把上面代码放在「非全局环境」里,就是闭包。

注意,闭包不是 count,闭包也不是 add,闭包是 count + add 组成的整体。

怎么制造一个「非全局环境」呢?答案是立即执行函数:

const x = function (){
var count
function add (){ // 访问了外部变量的函数
count += 1
}
}()

但是这个代码什么用也没有,所以我们需要 return add ,即:

const add2 = function(){
var count
return function add(){
count += 1
}
}()

此时 add2 其实就是 add,我们可以调用 add2

add2()
// 相当于
add()
// 相当于
count += 1

至此,我们就实现了一个完整的「闭包的应用」。

注意:闭包 ≠ 闭包的应用,但面试官问你「闭包」的时候,你一定要答「闭包的应用」,这是规矩。

解决了什么问题:

避免污染全局环境。(因为用的是局部变量) 提供对局部变量的间接访问。(因为只能 count += 1 不能 count -= 1) 维持变量,使其不被垃圾回收。

优点:

简单,好用。

缺点:

闭包使用不当可能造成内存泄露。

注意,重点是「使用不当」,不是闭包。

「闭包造成内存泄露」这句话以讹传讹很多年了,曾经旧版本 IE 的 bug 导致的问题,居然被传成这样了。

举例说明:

function test() {
var x = {name: 'x'};
var y = {name: 'y', content: "-----这里很长,有一万三千五百个字符那么长----" }
return function fn() {
return x;
};
}

const myFn = test() // myFn 就是 fn 了
const myX = myFn() // myX 就是 x 了
// 请问,y 会消失吗?

对于一个正常的浏览器来说,y 会在一段时间后自动消失(被垃圾回收器给回收掉)。

但旧版本的 IE 并不是正常的浏览器,所以是 IE 的问题。

当然,你可以说

君子不立于危墙之下,我们应该尽量少用闭包,因为有些浏览器对闭包的支持不够好

但你不可以说「闭包造成内存泄露」。对吗?

怎么解决缺点:

慎用,少用,不用。(我偏要用)

建议熟读这篇文章:

「每日一题」JS 中的闭包是什么?