带着疑问来理解JavaScript闭包是如此简单

前言

在JavaScript中,闭包对于JavaScript的意义无异于指针在c++中的意义。理解闭包是我们掌握JavaScript这门语言的基础能力,而对闭包的掌握程度就可以看出来你对JavaScript这门语言的深入程度,网上关于闭包的文章也不少但多数让人看过之后一头雾水,也许是自己理解能力较差。所以我还下定决心以提问的方式来理解何谓闭包,希望能给与我有相同境遇的博友一点帮助。

闭包是什么

  1. 基本概念(一句话来表述:当B执行时,如果访问了A中变量对象中的值,那么闭包就会产生)
    • 闭包是指有权访问另一个函数作用域中的变量函数,即B函数为闭包函数。
  2. 特征:
    • 函数嵌套函数。
    • 函数内部可以引用外部的参数和变量。
    • 参数和变量不会被垃圾回收机制回收。

关于闭包的疑问

1. 为什么函数内部可以引用外部的参数和变量?

  • javascript中作用域链决定的变量的引用。(作用域链是由一系列变量对象组成,我们可以在这个单向通道中,查询变量对象中的标识符,这样就可以访问到上一层作用域中的变量了。)

2. 为什么参数和变量不会被垃圾回收机制回收?

  • 在JavaScript的作用域的规则是根据标识符名称进行变量查找。
  • 函数在调用激活时,会开始创建对应的执行上下文,在执行上下文生成的过程中将确定变量调用的作用域链。
  • 正常来说函数执行完后,其对应使用的内存会被JavaScript的垃圾回收机制自动回收(如何回收不在此解释,简单来说就是变量不在被引用则会被自动回收),但是闭包不会如此请看如下代码。
var a = 20;
function clour(c) {
    var b = a + c;
    function innerTest() {
        return b + c;
    }
    return innerTest();
}

var result =clour();//全局变量result不会被回收,并且innerTest被其引用也不会被回收


以上就是为何闭包是能保存变量不被回收。因为闭包内部的变量被一直引用着,JavaScript的垃圾回收机制决定了这种情况不会被回收的。

项目中闭包常见的运用

  1. 最常见的应用-模块化
;(function(global, factory) {
    factory(global);
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
    
    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    };
    jQuery.fn = jQuery.prototype = {};
    //......
    if ( typeof noGlobal === strundefined ) {
        window.jQuery = window.$ = jQuery;
    }

    return jQuery;
})); 

看到这段代码大家是不是觉的很熟悉,相信只要是前端都用过他jquery,但是有几人仔细研究过jquery的源码呢(反正我没有=-=)。细节我们就不多说了,这种整体架构我们瞅瞅就晓得用了闭包。这也是前端模块化非常成功的一个实例,虽然现在已经渐渐退出前端界,但是现在比较火的vue(reactjs源码没看过不确定是否也使用了这种结构)中,模块化很常见。

  1. 最常见的应用-定时器
setTimeout(function(){
    console.log('this is time out')
},1000)
  1. 最常见的应用-柯里化传送门
// 正常函数
function normal(a, b) {
    return x + y
}

// 柯里化函数
function curry(x) {
    return function (y) {
        return x + y
    }
}

normal(2, 2)           // 4
curry(21)(2)   // 4

函数可以作为参数进行传递,并且将函数作为返回值return出去。

总结

道可道非常道。名可名非常名。在javascript语言世界中有许多特性需要我们自己去理解,别人告诉你的是他们站在自己的角度思考得出的结论,这点我们只能作为参考来看,这也是我为何要写这篇文章,不只是为了给别人分享下自己对JavaScript闭包的理解也是自己对闭包这块的一个总结吧,如有不正之处请文明指正。

注:本文参考的文档前端基础进阶(四):详细图解作用域链与闭包作者前端基础进阶系列文章通俗易懂值得一读。

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值