• JavaScript——闭包


    闭包(closure)是javascript的一大难点,也是它的特色。很多高级应用都要依靠闭包来实现。

    1、变量作用域

    要理解闭包,首先要理解javascript的特殊的变量作用域。

    变量的作用域无非就两种:全局变量和局部变量。

    javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。

    注意点:在函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明的是一个全局变量!

    2、如何从外部读取函数内部的局部变量?

    出于种种原因,我们有时候需要获取到函数内部的局部变量。但是,上面已经说过了,正常情况下,这是办不到的!只有通过变通的方法才能实现。

    那就是在函数内部,再定义一个函数。

    function f1(){
    
        var n=999;
    
        function f2(){
          alert(n); // 999
        }
    
      }

    在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。

    这就是Javascript语言特有的"链式作用域"结构(chain scope),

    子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

    既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

    3、闭包的概念

    上面代码中的f2函数,就是闭包。

    各种专业文献的闭包定义都非常抽象,我的理解是: 闭包就是能够读取其他函数内部变量的函数。

    由于在javascript中,只有函数内部的子函数才能读取局部变量,所以说,闭包可以简单理解成“定义在一个函数内部的函数“。

    所以,在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

     4、闭包的用途

    闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会在f1调用后被自动清除。

    为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

    ----------------------------------知乎上看到的不错解释----------------------------

    所有的函数在运行时都会在其所在空间创建一个新的子平行空间,所有的参数,局部变量及在函数内创建的函数(不管是函数声明还是赋值给变量的函数表达式),都是在这个子平行空间内创建(出生)的,只有出生在这个平行空间内的代码可以访问到这个平行空间内的变量及函数。即使在这个空间内创建的函数被返回,并赋值给全局或者父平行空间的变量,它也还是出生在那个平行空间,它对变量的访问也还是从那个空间开始往更大的平行空间查找变量,直到全局变量。

    由于平行空间内的函数在运行时又会在其所在空间创建更小的平行空间。所以如果在平行空间内创建的函数还有可能运行,则函数所在的平行空间及所有父空间都不会被销毁。

    下面来画个图:

    考虑如下JS代码:

    var a = 1
    
    function f(b) {
      return function g(c) {
        return function h(d) {
          return a + b + c + d
        }
      }
    }
    
    var add2 = f(2)
    
    var add4 = add2(2)
    var add5 = add2(3)
    
    var r1 = add4(10)
    var r2 = add5(10)
    
    console.log(r1,r2)
    然后看下图(点击可以看大图):我解释一下,左边是代码,最大的黑框是全局空间,然后第11行的 f 运行时创建了较小的黑色框,并传入了2即形参b的值,用红色圈出来了,同时 f 的运行返回了函数g,被全局空间内的变量add2指向,add2再次调用两次,于是在较小的黑框空间内又创建出了两个空间,即两个蓝色的空间,传入的c分别为2和3,也在空间内画出并用红色圈出来了,同时函数g两次调用都返回了函数h,分别赋给了变量add4和add5,但注意add4和add5分别指向了从不同空间(即g两次运行时创建的两个空间),这两个函数是不同的,而且也处于不同的空间。
     
     
    输出结果 :15,16


    作者:谢然
    链接:https://www.zhihu.com/question/34547104/answer/198016466
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    回调函数仿360开机
    封装运动框架基本函数(多个属性包括透明度和zIndex)
    封装运动框架基本函数(单个属性)
    返回当前样式的函数
    MacOs High Sierra 升级失败解决办法
    Easy-RSA 3 Quickstart README
    Easily use UUIDs in Laravel
    OAuth2.0 原理流程及其单点登录和权限控制
    细说SSO单点登录
    单点登录
  • 原文地址:https://www.cnblogs.com/zyxiaohuihui/p/8480009.html
Copyright © 2020-2023  润新知