# 一个JS初级工程师的闭包自我理解---闭包虽老,我亦犹新!

# 1.什么是闭包?

面试官问:瓦特is闭包?

A童鞋:I node,闭包is 几拉呱啦,巴拉巴拉...

MDN:函数与对其状态即词法环境lexical environment)的引用共同构成闭包closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。在JavaScript,函数在每次创建时生成闭包。

直观表现:

function father() {
    var name = "Dede"; // name 是一个被 father 创建的局部变量
    function child() { // child() 是内部函数,一个闭包
        console.log('My father name is ' + name); // 使用了父函数中声明的变量
    }
    child();
}
father();
// 输出
// My father name is Dede

# 2.闭包的作用?

巴拉巴拉巴拉....相信大家都耳熟能祥

主要用处:

  • 1.让外部访问函数内部变量成为可能;

  • 2.局部变量会常驻在内存中;(节流、防抖等高阶函数实现)(优点亦是缺点)

  • 3.可以避免使用全局变量,防止全局变量污染;

# 3.闭包的优缺点?

巴拉巴拉巴拉.....相信你也可以说出来

  • 会造成内存泄漏(有一块内存空间被长期占用,而不被释放)

# 4.分析

很多人在面试的时候都会可以或多或少回答出这些基本概念,可是其中又有多少人只是在背答案而没有真正理解清楚其概念?

更别提如何去灵活运用了。

  • 许多高阶函数中都涉及到了闭包的运用,例如:节流、防抖、promise等高阶函数;
  • 另外一些插件,框架中也运用到了闭包。

# 5.结论

闭包可以说在js这门语言学习生涯中第一个分水岭。----来自‘伟’大的小呆

真正掌握闭包的工程师,才算是开始有突破的趋势了。

闭包中包涵的概念有多少,来捋一捋?

  • 1.最基本函数的运用

  • 2.变量的作用域

  • 3.内存的分配,指针指向

  • 4.垃圾回收机制

作用域就可以延伸到this的指向等等...

内存的分配完后,垃圾回收机制紧随其后...

等等,你以为真的结束了吗,其实才刚刚开始!

# 6.一道经典的面试题

# 6.1 第一题

你能正确搞清楚,每一步都发生了什么,最后的结果是什么吗?

这题考察的就是在JS中内存的分配,和变量引用(指针)的问题。

我习惯用指针来描述这个引用的概念,可能不是很正确,但很好理解。

# 6.2 第二题

好的,这题有点难,我们先来一个小demo练手:

这题,稍微懂点JS引用类型的童鞋,应该都知道:

  • 1.a实际上不是{name: lili}这个对象,只是该对象的地址引用。
  • 2.b=a,也就是指向了{name: lili}这个对象。
  • 3.a指向的对象的name属性重新赋值为cat,现在该对象为{name: cat}
  • 4.打印a.name,会先找到a指向的那个内存空间,然后把数据取出来,最后输出cat。
  • 5.打印b.name,因为b也指向了该对象,所以输出的是cat。

你可以测试 a===b a是全等于b的,因为它们都是引用类型,只是一个指针,所引用的地址是一样的。

这题没有难度其实,稍微理解下引用类型的概念就可以掌握了。

# 6.3 解决第一题

回到这题

找这题就比较复杂了,我们要一步一步来解答:

  • 1.首先js会在内存中分配一块空间用于存放{n: 1}这个数据(这里叫明明),然后把该空间的地址引用赋值给a。
  • 2.变量b也指向这个对象{n: 1}明明
  • 3.a.x=a={n: 2},这一步操作好像争议颇多,我也不是很清楚。
  • 4.我认为有一种解答还是比较有说服力,就是说不管是a.x=a={n: 2},还是a=a.x={n: 2},赋值的顺序是有优先级的,就像运算操作符乘除优先级大于加减这样的概念。这里,对象属性访问操作的优先级要选大于访问对象。
  • 5.所有就是a.x会先做赋值运算,得到一个结果,a.x={n: 2},也就是a(或者b)指向的那个对象(明明)会多一个属性x={n: 2}。
  • 6.接着继续赋值,变量a会重新指向一个新的地址,该地址空间存放着{n: 2}这么一个对象(叫二狗子)。
  • 7.到了这里就清楚了,最后a是一个新的地址的引用,该地址存放的二狗子对象是{n: 2},那么通过a.x访问该对象的属性x,但该对象只有一个属性为n,那么将打印出undefined。
a = {
    n: 2
}
a.x  === undefined
  • 8.而b指针指向的对象明明里面的数据结构是:
b = {
    n: 1,
    x: {
        n: 2
    }
}
  • 9.并且可以尝试b.x === a,将会输出true。

我个人认为,这是最好理解的一种思路,同时我也在不断学习中,如果有大佬指出概念不对的地方,我会虚心接受。

# 6.4 再来一题验证思路

  • 1.首先分配一块空间给对象{name: bibi},然后将该对象的地址引用赋值给obj1。
  • 2.通过getObj函数得到一个对象赋值给obj2。
  • 3.传入函数的参数是obj1,也就是传入了一个指针,然后在函数内部,将该指针指向的对象的name属性修改为jock。
  • 4.重新分配一块空间给对象{name: lili},将该对象的地址引用赋值给形参obj,最后return 该指针obj。
  • 5.变量obj2将得到一个值为对象{name: lili}的地址引用,也就是新对象的指针。

最后打印obj1,将输出的是name=jcok。打印obj2,将输出的是name=lili。 并且使用 obj1 === obj2 将得到false的结果。

好了,这部分就是内存分配,指针地址引用的部分,不再深入。

# 6.4 垃圾回收机制

那么阅读到这里,你应该对引用类型的概念更清楚一些了,脑海里有了指针的概念后,就容易多了。

讲到内存的分配,自然有内存的释放。而垃圾回收机制就是内存释放的一个过程。JS中是自动回收那些分配的空间,它有一些相应的策略。

最简单的来说,就是分配了一个内存空间,该空间使用后若无地址引用,也就是没有任何一个从根开始的指针指向该地址空间,那么JS就会派部队去清除该地址空间的数据,然后释放这块空间占用的内存。

这里指出,应该是没有一个从根节点开始访问的那个值,才会被删除。有可能一个对象它有一个或者多个指针指向它,但是没有从根开始的引用或者是指向,这个对象也将被回收。专业名词叫做:可达性,也就是可以被访问到的意思。

JS的垃圾回收机制一般可分为标记清除和引用计数这两大块,具体不细讲。

# 6.5 总算明白了a = null,并不是将原先a指向的对象给删除掉

很多时候,总认为我给a赋值一个null,那么就意味着我把原先a指向的对象中的数据给删除了,其实并没有。你只是让该对象失去了地址引用,并不是你在删除它,是JS会去监视那些不可达的值,然后通过垃圾回收机制去删除它的。

也就是说,你a=null后,之前的对象并没有马上被删除,应该是J会在一个合适的时机去做这件事。而且,a=null并不意味着该对象就真的失去了地址引用,有可能你在别的地方还用其他变量保留了该对象的地址引用,那么你想要的效果将会不奏效。

# 7.再讲闭包,重新认识

说了那么多好像跟闭包无关的概念,但是恰恰是这些概念,才能使你充分理解闭包的精髓,并且能够去运用闭包解决一些实际问题。

# 7.1 变量常驻内存

根据MDN提供的术语,在js中,闭包生成的时机是函数创建的时候。但是我还是不太懂这什么意思啊,所有我只能去看看别人的理解,然后找到一句我认为我可以理解的话:

闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。闭包会发生内存泄漏,每次外部函数执行的时候,外部函数的引用地址不同,都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据,那么这个时候,这个数据不删除,保留一根指针给内部活动对象。

原文出处链接

我彭大师从不抄袭,也不会打妄语。

这句话告诉我们,在内部函数引用了外部函数的数据时,这个数据不会被删除,会保留一个指针引用给内部对象,从而这个数据的内存空间就不会被回收机制干掉,也就有了闭包会让变量常驻内存这个特点。

# 7.2 高阶函数:节流、防抖的实现。

从而我们来分析一个我们经常被问到的两个函数:节流于防抖。

这两个函数是会一起被提及的,它们的概念呢也经常会被混淆,有时候傻傻分不清节流和防抖的区别,以及它们使用的场景。

  • 场景1:只是在脑子里有一个概念,我要优化一些操作的时候,就会想起节流和防抖,但是具体用哪一个,我并不是很清楚,需要再百度一下,然后再选择一个用。
  • 场景2:面试的时候,面试官总爱让你手写节流、防抖这两个高阶函数。你在面试前总是背的半死,到了笔试的时候,总是会想不起来怎么写,或者总是会写错一些步骤。

所以,本节我们就一起彻底的弄清楚节流和防抖的概念,以及在真实代码中的运用和如何自己手写一个这样的函数。

我们不从什么是节流和防抖这两个概念入手,这样还是生搬概念,无法让人简单去理解。

我们从实际的运用中去把这两个概念提取出来,这样就成为你自己的东西了。

# 7.3 搜索框优化

第一轮:

某一天,你开发了一个搜索框的功能,这个功能用于关键词检索。

你仔细检查,自测无误后,提交代码,满心欢喜让测试开始测试,自认为天衣无缝,没有任何bug。

不久测试小姐姐说,你这个页面有bug啊。

???

你心想,怎么可能,我明明自己测了很多次,根本没有任何问题,你说说看,哪里会有问题??

测试小姐姐:你这个输入框,我才输入了一个字,我还没输入完,这页面怎么就开始有搜索结果了呢??

First Blood!!

嗯??一定是小姐姐打字太慢了,我去看看怎么回事。

你一看代码,原来你用的是input,change事件,当input绑定的value的值发生变化的时候,就会触发此事件,然后去调用搜索接口。

但是好像,不需要一有值就马上去搜索,这样第一个问题就是,用户没有输入完,就去查询结果。第二个问题,就是一直频繁的请求接口,造成了没必要的请求,造成了性能的损耗。

然后,作为一个合格的程序员,你会去思考,该怎么去优化这个搜索功能。按照常规的思路走,要不我在输入框旁边加个按钮,点击才搜索,这样就不会有没输入完就开始搜索的问题了,也不会一直频繁的请求接口了。

第二轮:

于是你,开始了新的一轮修水管的任务了。噼里啪啦,半小时后,你又满心欢喜的提交了代码,然后到了小姐姐手上。

没过多久,小姐姐就跟你说,又有问题,你这个交互逻辑很繁琐啊,用户输入完,还要去点击那个丑丑的按钮,很不便捷。其二,我压力测试,我可以一直去点那个按钮,这样一直在发送http请求,造成了网络拥堵,要是有人故意这样搞破破坏,一直请求后台,会对服务器的性能和带宽带来严重的影响。

此刻,你的内心是崩溃的,我明明优化了,怎么好像问题更多了。

Double kill!!!

经过一段自我怀疑自我调整的过程,你又有了新的优化方案,我去限制你用户请求接口的频率不就好了吗,我让你延迟一会,才会去触发调用接口,岂不妙哉!

第三轮:

你开始在调用接口的地方,写了一个setTimeout函数,延时1秒去调用接口。你测了几遍感觉没什么问题,小心翼翼的检查几次后,提交代码到测试小姐姐手上。

经过小姐姐一番揉虐,小姐姐说:你这个还是不行啊,虽然第一次是延迟了1秒请求,但是我点了100次,但是过1秒后,马上就有100个请求出现了。

Triple kill!!!

第四轮:

你思考的方向是对的,但是还是没有起到作用。首先确定,使用延时这个方法是可行的,但是怎么限制在一段时间内,只能有一次的请求。比如设置一个时间为2秒钟,在这个期间,可能会触发10次的chang事件,那么怎么把10次事件只触发一次呢?

思考点:10次请求如何只触发一次?

思路,从定时器本身下手。什么是定时器?

setTimeout(() => {
    console.log('屏幕前的你,若是男生,则帅;女生,则肤白貌美!')
}, 1000)

上述代码运行后,过1秒钟左右是不是会输出:

屏幕前的你,若是男生,则帅;女生,则肤白貌美!

这句话。

如果我们将其用一个函数包裹起来:

function sayToYou() {
    setTimeout(() => {
        console.log('屏幕前的你,若是男生,则帅;女生,则肤白貌美!')
    }, 1000)
}
sayToYou()

是不是结果跟上面的一样。

那如果我点击了十次按钮,就会触发十次sayToYou函数,只不过是延时1秒后,马上发输出10句。

那么我想要的是连续快速的点击十次后,只有一次的sayToYou函数中的定时器的回调能够被触发,那该怎么办呢??

是不是可以用一个变量将定时器先存储起来,如果在一段时间内(第一个定时器定时的时间范围内)又有新的函数被触发了,那么先判断这个变量是不是存在了,如果存在上一个(第一个)定时器变量,那么我就将上一个(第一个)定时器清除掉,不让它触发回调任务。这样之前的点击事件是不是就无效了。只有当前的点击事件继续进入定时器内,等待这段时间过去,才会触发回调事件。

那么我们就这样做吧,改造一下我们的sayToYou函数:

let timer = null
function sayToYou() {
    if(timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        console.log('屏幕前的你,若是男生,则帅;女生,则肤白貌美!')
        clearTimeout(timer)
    }, 1000)
}
// 用循环 模拟高频点击按钮100次
for(let i = 0; i < 100; i++) {
    sayToYou()
}
// 过一秒钟左右,只输出一次。

运行次代码,你即将热泪盈眶,因为和你设想的结果一毛一样。

首先我们屏蔽清除定时器的那行,将得到100句的输出:

接着不屏蔽那句清除判断:

是不是和我们预期一样 只会输出一句!!!

那么我们接着优化一下我们的代码

现在虽然是可以在高频触发的情况下,只会触发一次回调,但是我们还要额外去声明一个变量,那如果我有很多地方都需要调用这个函数怎么办??

难道要去多个地方都定义一个变量这样,岂不是很麻烦??

那么,说了这么多,引入了这么多js概念,终于到了重头戏了,我们在前面讨论闭包的时候,是不是有说到闭包的优点,咱们是不是可以利用起来。

现在想想闭包有什么优点(特点)?

回答:使变量常驻内存中

ok,那么我们将闭包的特性引入进来,改造一下:

  • 1.首先,咱们要创建一个闭包
  • 2.内部函数使用外部函数中的变量
  • 3.返回这个函数

改造后的代码:


function debounce() {
    let timer = null
    
    function sayToYou() {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            console.log('屏幕前的你,若是男生,则帅;女生,则肤白貌美!')
            clearTimeout(timer)
        }, 1000)
    }
    return sayToYou
}

// 使用一个变量得到防抖的返回函数
const sayToYou = debounce()

// 用循环 模拟高频点击按钮100次
for(let i = 0; i < 100; i++) {
    // 执行此函数
    sayToYou()
}

分析:仔细看,我们的sayToYou函数是不是里面逻辑一行代码都没有改动,我们改动的是什么?

  • 1.另起一个叫做debounce的函数,里面定义了一个timer变量。
  • 2.一个内部函数sayToYou,也就是我们之前那个sayToYou函数。(无更改)
  • 3.最后return此函数。
  • 4.引用的方式变化,外部调用的sayToYou函数是通过调用debounce函数获得的返回值。

上面debounce咱们给它称为父神,那么里面的sayToYou咱们给它叫做造娃,由于父神的记忆不是很好(老年痴呆?),父神需要在手臂上(timer)划一道痕来标记那个娃。造娃的过程很简单,父神抓一把泥巴开始捏娃,然后在手臂上划一下。(造娃需要1秒钟),造完后,父神手一挥,手臂上的痕迹就不见了。

//当父神执行的时候,也就是父神开始造娃的时候了,失手将催娃口诀遗失在人间
const sayToYou 催娃口诀 = debounce()

// 这个时候有一些愚蠢的凡人,一直在向上天祈祷(催娃)
// 要让催娃口诀生效,必须加两个神秘的符号()
for(let i = 0; i < 100; i++) {
    //催娃
    催娃口诀()
    sayToYou()
}
// 虽然这个时候被催娃了100遍,但是父神一看手上的痕迹还在啊,你催个蛋蛋娃,给本神等着。
// 最后,娃造完后,父神大手一挥,手臂的痕迹不见了,娃就落地了,呱呱大叫:你个大丑逼!

运行结果

这就是结合闭包的用法,优化了我们的函数。

# 7.4 彻底要理解闭包

其实大家可能还是不能体会到下面这句话的意思。

“每次外部函数执行的时候,外部函数的引用地址不同,都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据,那么这个时候,这个数据不删除,保留一根指针给内部活动对象。”

这句话太长,我们要分成两句话:

  • 1.父函数每执行一次,都会创建一个新的引用地址。
  • 2.会保留一根数据指针给内部函数使用。

结合到一起,意思就是,同一个引用地址的内部函数所引用的那个变量是同一根指针。

为了更直观显示出区别,我们要改下代码:

执行过程:a的到了父函数执行的一个地址引用,同时,获得了本次父函数执行后的i的指针。

执行3次a函数:

    1. i = 0 => i++ => 1
    1. i = 1 => i++ => 2
    1. i = 2 => i++ => 3

那么接着来一个例子:

我们多写了一个b函数,然后执行的地方改成执行两次a,一次b。

得到的结果是 1 2 1

这说明了什么?

说明了每次外部函数执行的时候,外部函数的引用地址不同,都会重新创建一个新的地址。

那既然a和b引用的地址不同,那么它们就会各自拥有一个闭包变量i(是不同的地址)

所以当执行完两次a函数后,a所引用的地址中的内部变量i为2,接着执行b函数,不要天真的认为此时i是2,其实这个时候b所引用的地址中的内部变量i是0,所以执行完b函数将要输出的是1。

思考1 console.log(a === b)

那么,我们将上面代码小小的改变一下:

这个时候,控制台要输出什么?你知道答案吗?

思考2 console.log(a === b)

# 7.5 那你的防抖函数好像和市面上的不同啊!?

那么这一小节,我们将继续优化咱们的防抖函数,努力让它称为你想要的样子!

市面上的防抖函数好像是这样用的嘛:

const sayHello() {
    console.log('hello')
}
const a = debounce(sayHello, 1000)
// 输出 hello
a()

这有何难?咱们把闭包的本质都理解的差不多了,传两个参数进去而已,不在话下!

来,让我们看下,第一个参数为一个函数的地址,第二个参数为延时的时间。

// 火影1代
function debounce(fn, delay) {
    let timer = 0

    return function () {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(fn, delay)
    }
}

const sayHello = () => console.log('hello, every body!' )
const a = b = debounce(sayHello, 1000)

a()
a()
b()

我们通过设置两个参数,就貌似达到了市面版的效果,运行后也只有一句欢迎信息。

但是,如果我的sayHello函数并不是直接输出一句话,而是在调用的时候传一个name进去,这个时候怎么办呢?

嗯?好像可以继续优化:

// 火影2代
function debounce(fn, delay) {
    let timer = 0

    return function () {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn(...arguments)
            clearTimeout(timer)
        }, delay)
    }
}

const sayHello = name => console.log(`hello, ${name}!`)
const a = b = debounce(sayHello, 1000)

a('jcok')
a('lili')
b('cat')

改动点:

  • 1.这里我们将sayHello改造了一番,让它可以支持传入一个name,并且输出欢迎信息。
  • 2、在防抖函数内部,fn执行的地方,通过解构arguments这个全局变量拿到sayHello传入的变量。(可能有萌新对这个arguments很陌生,还有对...arguments这样的语法感到疑惑,这里推荐你去练个手,多打印几次arguments就大概明白了。至于解构也就是三个点号...这部分内容属于ES6,自行查看)

最后我们高频抖动了三次,分别传了jock,lili,cat三个名字进去,最后只会打印出在1000毫秒内最后被触发的那一个,也就是打印hello, cat!

让我们运行一下:

事实上,结果跟我们想要的完全一致。

做到这里,你以为就完了吗??no,实际上跟市面上的版本还少了一个this的指向。

我们这里的sayHello函数默认是挂载在window对象身上的,所以没有在fn中修正指向,也是可以正常运行的。

但是,防抖函数是用于很多地方,如果你没有正确的修正this的指向,那么可能会有bug产生。

来个实际的例子:

function debounce(fn, delay) {
    let timer = 0

    return function () {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn(...arguments)
            clearTimeout(timer)
        }, delay)
    }
}
const obj = {
    name: 'god',
    sayHello: function () {
        console.log(`hello, ${this.name}!`)
    }
}
const a = debounce(obj.sayHello, 1000)
a() // hello, undefined!

修改点:

  • 1.将sayHello函数写入到一个对象obj身上。(这里注意,不能再用箭头函数了)

你会发现,运行程序后,输出的竟然是hello, undefined!(这里测试方便是在NodeJs 环境中执行的,可实际上NodeJS中没有document和window。)

而你不相信,单独运行一次obj.sayHello(),得到的输出是hello, god!

这里就是因为在debounce中调用fn的时候,this的指向默认是window,而window对象没有name的属性,所以,将打印的是hello, undefined!

如果你不相信,那么我们将在window身上挂载一个name属性叫做john,然后执行程序试试。

保持debounce和obj的代码不变:

1.先执行一次debounce(obj.sayHello, 1000)()

得到的结果居然是hello, ! 我愣了两秒,反应过来,可能window对象上已经有了一个name属性为'', 所以,我把window打印了一下:

果然,和我推测的一样,那就没毛病了,如果我们在sayhHello中打印的不是name,而是一个window身上没有的属性,将会输出的应该是我们之前推测的hello, undefined!

2.接着修改window.name属性为'john'

继续调用一下debounce(obj.sayHello, 1000)(),得到的结果是和我们预测的一致:hello, john!

所以,得出的结论与我们推测的一致,最后我们还需要去修改this的指向。

# 7.6 较为完整一个防抖函数诞生

function debounce(fn, delay, _this) {
    let timer = 0
    return function () {
        if(timer) {
            clearTimeout(timer)
        }
        // 这一句很关键
        const that = _this ? _this : this
        timer = setTimeout(() => {
            fn.apply(that, arguments)
            clearTimeout(timer)
        }, delay)
    }
}
const obj = {
    name: 'god',
    sayHello: function () {
        console.log(`hello, ${this.name}!`)
    }
}
const a = debounce(obj.sayHello, 1000, obj)

a() // hello, god!

这里注意我们必须要主动传入这个obj这个作为当前上下文给fn去apply这个this,不然即使我们使用fn.apply(this, arguments)这样去修正this指向,但是得到的结果仍然和你想要的不一致。

const that = _this ? _this : this

如果你不显式地传入一个上下文,那么默认使用当前上下文。

换句话说就是debounce的return最终执行的环境的当前上下文会作为默认上下文传入该that中,然后去修正fn的this指向。(没有主动传入一个上下文的情况下)

这里很多小伙伴会疑惑了,大家不妨可以试一下。

# 7.7 一个更为完整的测试案例

function debounce(fn, delay, _this) {
    let timer = 0
    return function () {
        if(timer) {
            clearTimeout(timer)
        }
        const that = _this ? _this : this
        timer = setTimeout(() => {
            fn.apply(that, arguments)
            clearTimeout(timer)
        }, delay)
    }
}

const obj1 = {
    name: 'obj1',
    sayHello: function () {
        console.log(`hello, ${this.name}!`)
    }
}
const obj2 = {
    name: 'obj2',
    a: debounce(obj1.sayHello, 1000)
}
const obj3 = {
    name: 'obj3',
    a: debounce(obj1.sayHello, 1000, obj1)
}
const a = debounce(obj1.sayHello, 1000)
const b = debounce(obj1.sayHello, 1000, obj1)

obj1.sayHello() // 没有使用防抖优化

obj2.a() // 使用了防抖优化,默认上下文为obj2

obj3.a() // 显式的改变上下文为obj1

a() // 使用了防抖优化 默认上下文为window(在浏览器环境中)

b() // 显式的改变上下文为obj1

大家可以测试下上面的代码,看看输出情况和我上面分析的对不对。

# 8总结

一句话概括:JS博大精深,岂是我等宵小之辈可以觊觎!?

# 后话

我是小呆,欢迎你与我讨论技术。