JavaScript闭包

一、变量的作用域:

要理解闭包,首先必须理解JavaScript特殊的变量作用域。
  
  变量作用域无非就是两种:全局变量局部变量。 
  
  JavaScript语言的特殊之处,就在于函数内部可以直接读取全局变量。 
  
    var n=999;
  
    function f1(){
      alert(n);
    }
  
    f1(); // 999
  
  另一方面,在函数外部自然无法读取函数内的局部变量。 
  
    function f1(){
      var n=999;
    }
  
    alert(n); // error
  
  这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量! 
  
    function f1(){
      n=999;
    }
  
    f1();
  
    alert(n); // 999

二、如何从外部读取局部变量?

有时候需要得到函数内的局部变量。正常情况下,这是办不到的,只有通过变通方法才能实现。
  
  那就是在函数的内部,再定义一个函数:
  
      function f1(){
      
          var n=999;
      
        function f2(){
          alert(n); // 999
        }
      
      }
  
  在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。
  
  但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是JavaScript语言特有的“链式作用域”结构。
  
  既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!
  
     function f1(){
      
          var n=999;
      
       function f2(){
         alert(n);
       }
      
       return f2;
      
     }
      
     var result=f1();
      
     result(); // 999

三、闭包的概念

上一节代码中的f2函数,就是闭包。
  
  由于在JavaScript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。
  
  所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
  
  闭包的两个特点:
  
      1、作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
      
      2、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
  
  其实上面两点可以合成一点,就是闭包函数返回时,该函数内部变量处于激活状态,函数所在栈区依然保留。
  
  我们所熟知的主流语言,像C,java等,在函数内部只要执行了return,函数就会返回结果,然后内存中删除该函数所在的区域。生命周期也就停止了。一般的js函数也是这样。
  
  但是有闭包特性的js函数有点特殊。
  
  就例子来说:
  
      function a(){
      
          var i=0;
          
          function b(){
          
              alert(++i);
          
          }
          
          return b;
          
      }
      
      var c = a();
      
      c();
  
  在函数a中定义了函数b,a又return了b的值。
  
  这样在执行完var c = a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。
  
  这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:
  
  当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。
  
  可是,如果我们再多执行一行。
  
      var c = a();
      
      c();
      
      c();
  
  第一次弹出1,第二次执行却弹出了2。
  
  也就是说,第一次c()后,a中的i依然保留。自然a在内存的栈区依然保留。
  
  a是return过了,但是,a及内部值却依然存在,这就是闭包。

好了,总结下:
  
      1、闭包外层是个函数。
      
      2、闭包内部都有函数。
      
      3、闭包会return内部函数。
      
      4、执行闭包后,闭包内部变量会存在,而闭包内部函数的内部变量不会存在。

四、闭包的用途:

1、可以读取函数内部的变量 ,保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
  
  2、让这些变量的值始终保持在内存中。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。

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

五、使用闭包要注意:

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

JavaScript闭包函数理解相关推荐

  1. Javascript闭包简单理解

    Javascript闭包简单理解 原文:Javascript闭包简单理解 提到闭包,想必大家都早有耳闻,下面说下我的简单理解. 说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和 ...

  2. JavaScript闭包函数与闭包释放

    作用域链:一般,变量取值是到创建这个变量的函数的作用域中取值,如果没有查到,就会往上查找,直到找到全局作用域,这个查找的形成为作用域链. Javascript闭包函数:闭包就是能够读取其它函数内部变量 ...

  3. JavaScript闭包函数

    JavaScript闭包函数 1 概述 2 词法作用域 3 闭包 1 概述 一个函数和对其周围状态(词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure).也就是说, ...

  4. JavaScript闭包函数的理解与使用

    要理解闭包,首先理解javascript特殊的变量作用域,变量的作用域无非就是两种: 全局变量 局部变量 javascript语言的特殊处就是函数内部可以读取全局变量. 1.如何从外部读取局部变量 我 ...

  5. 关于Javascript闭包的理解

    一.什么是闭包? "官方"的解释是:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相 ...

  6. javascript闭包的理解

    javascript闭包是javascript的难点,很多人对js闭包不是很理解,我对js闭包一开始也是云里雾里,我刚刚进兴安得力的时候,做的转正试题中就有一个对闭包理解的题目.如何理解javascr ...

  7. JavaScript闭包函数详解

    目录 闭包函数 变量作用域 闭包的概念 闭包的用途 闭包的缺点 闭包函数 变量作用域 要理解JavaScript闭包,就要先理解JavaScript的变量作用域. 变量的作用域有两种:全局的和局部的( ...

  8. js的作用域链,原型链,以及闭包函数理解

    代码一: this.number = 10 function a() {this.number = 20 } a.prototype.init = () => console.log(this. ...

  9. golang的闭包函数理解

    golang中在函数中不能声明一个函数,但是可以在函数中声明匿名函数,统称闭包. 最开始接触golang时,对这一块不是特别理解,通过以下代码进行了解: 函数返回是个func()函数,返回的就是闭包函 ...

最新文章

  1. js 变量、函数提升
  2. mysql查询当前use的数据库
  3. Python-OpenCV 处理图像(二):滤镜和图像运算
  4. Ubuntu下安装arm-linux-gcc-4.4.3.tar.gz (交叉编译环境)
  5. 算法 --- reduce的使用.
  6. [react] react是什么?它的主要特点是什么?
  7. 【论文翻译】统一知识图谱学习和建议:更好地理解用户偏好
  8. 小牛485通讯原理_让你秒懂智能电表工作原理及抄表原理
  9. oracle 11g Flashback Data Archive(闪回数据归档)
  10. mysql+数据库主从原理_MySQL主从复制原理及实现
  11. keytool openssl
  12. word表格怎么缩小上下间距_word表格间距 在WORD表格中如何将行间距缩小
  13. 交叉验证stratified k-fold cv与shuffle等常用cv方法
  14. 画小米的新Logo只用border-radius可不行!
  15. 解决系统提示:内存不能为“read”或written的办法
  16. ffmpeg webm 提取_使用ffmpeg将webm转换为mp4
  17. 射线与OBB相交检测
  18. 元界快讯|中手游去年营收微增净利下滑,“仙剑”元宇宙今夏开测
  19. 跨职能流程图_领导跨职能团队的6个关键技巧
  20. sprintf你知道多少

热门文章

  1. Unity3d 寻路功能 介绍及项目演示
  2. Linux下安装飞秋——可以和windows通信
  3. 实用的生产管理系统案例分析:如何应对市场快速变化?
  4. pycaret的具体使用流程
  5. 如何用计算机抽奖,怎么设计一个可以电脑随机抽奖程序
  6. 头歌实训项目【学生信息转换】
  7. 课程学习之计算机网络
  8. 法向导数 格林第一公式
  9. 2021斯坦福CS224N课程笔记~7
  10. JS 制作简易计算机