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

前言

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

闭包是什么

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

关于闭包的疑问

1. 为何函数内部能够引用外部的参数和变量?前端

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

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

  • 在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源码没看过不肯定是否也使用了这种结构)中,模块化很常见。java

  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出去。react

总结

道可道很是道。名可名很是名。在javascript语言世界中有许多特性须要咱们本身去理解,别人告诉你的是他们站在本身的角度思考得出的结论,这点咱们只能做为参考来看,这也是我为什么要写这篇文章,不仅是为了给别人分享下本身对JavaScript闭包的理解也是本身对闭包这块的一个总结吧,若有不正之处请文明指正。jquery

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

相关文章
相关标签/搜索