通俗的讲JavaScript闭包

    打开百度搜索JavaScript闭包,页面将会显示n条关于大牛的闭包解释,但是大多都或多或少带了一些官腔在里头,专业且容易让新人摸不着头脑。

    闭包最不能让人理解,或者说最为抽象的部分就是他的名字,很多人对闭包进行了很多官方的解释,再加上一些代码,但大多情况下很难一下子理解这个东西,随着学习的深入,这种情况有所好转,因为你的很多代码里无形中使用了闭包。在这种情况下,我们暂时把闭包称为'函数'。

    现在有一个简单的计数程序:要求每点击一次按钮,此数+1。这是一个再简单不过的程序,几乎所有的编程新手在第一天入门就能写出来,这是天生的能力,为什么?因为这个东西不够抽象,因为你在生活中随处可见这种'程序',如给杯子里加水,碗里加米饭等等。因此你想到的方法如下:

// counts变量中存储了一个初始num值
var counts = 0;

// [计数器] 某个html标签点击时变量增加并且保存
dom.onclick = function () {
    counts++;
    dom.innerHTML = counts;
};

    如果我告诉你,闭包的本质就是这么一段代码你会作如何感想?来看下面这段代码:

function countsPlus () {
    let counts = 0;
    dom.onclick = function () {
        counts++;
        dom.innerHTML = counts;
    };
}
countsPlus();

    这两段代码有啥区别?区别是一个代码在全局作用域内,一个代码在函数内,然后他们得到了相同的结果。这两段代码不难理解,但是有趣的是,下面那个就叫闭包。比较这两段代码的不同,我们能得出的第一点观点就是,闭包跟函数有关!那又有同学问了,什么,那这样的话我岂不是写个函数然后里面再丢点变量都是闭包了?这时再来看下面这段代码:

function countsPlus () {
    let counts = 0;
    function plusOne () {
        counts++;
        dom.innerHTML = counts;
    }
    plusOne();
}
countsPlus();

    这段代码是闭包吗?是,却又不是。因为照官方的解释'闭包就是一个能够访问另一个函数内部变量的函数',上面代码的确是闭包,但是以我的观点来讲,这并不能算是一个闭包。因为这没有任何意义,因为我们无法通过其他手段来操作这里面的变量,只要我们不刷新页面(不重启程序),countsPlus函数里面有啥都跟我们无关,这时候就到了垃圾回收机制出场了。现在假设你点了一份外卖,吃完了,你这时候的做法就是把它扔掉,空出你的位置,放置其他东西,因此这个玩意儿不能作为一个计时器来使用。到这里你一定觉得晕乎乎的,你说的的啥跟啥啊,越说越听不懂了。如果这时候这样解释闭包你可能就会明白了——'有一个函数A,有个函数B,B能够让A函数内的变量不被垃圾回收回收掉,此时的B就是闭包'。

    所以现在的问题就是,怎样才能让变量不被垃圾回收机制回收?想象这么一个情景,垃圾回收,这个变量一定是再也没有作用了,不然的话以后再需要这个变量岂不是要报错,整个程序岂不是直接崩溃了?因此让一个变量不会被回收的方法就是用一个可以对此变量进行某些操作的函数来作为传话人,以此来实现外部程序间接操作变量,这样是不会被垃圾回收的。

    现在让我们回到第一段代码中去,counts变量同样不可以被回收,他与闭包的唯一区别就是,这个变量不在一个函数当中。然而他们的本质却如出一辙,只不过,前者变量是公开的,后者的变量是私有的封闭的。

    闭包时让JavaScript变得更加优雅的基石,当你能够了解到你所写的代码有没有用到闭包时,你的代码可读性,耦合度将会得到极大的改善,同样会使你避免很多性能上的问题(不必要的内存占用),同样会让你体会到JS无与伦比的灵活性!
    最后,让我们来思考一个问题,jQuery的选择器有没有用到闭包呢?

$('element') ?
// 提示$函数返回了一个可便利的节点类数组


    

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值