JavaScript闭包详解

作者:CSP 时间:2024-04-19 10:06:52 

目录
  • 1. 什么是闭包

  • 2. 闭包的作用

    • 2.1) 记忆性

    • 2.2) 模拟私有变量

  • 3. 闭包的注意点

    • 总结

      1. 什么是闭包

      闭包:函数本身和该函数声明时所处的环境状态的组合。
      也就是说函数不在其定义的环境中被调用,也能访问定义时所处环境的变量。

      所以使用闭包,就可以将数据与操作该数据的函数相关联。

      举个例子:


      function foo() {
      let a = 1;
      return function() {
      console.log(a);
      }
      }
      let foo1 = foo();
      foo1() // 输出 1

      这个就是一个闭包的例子,在 foo 中,由于 return 了一个函数,这个函数拥有涵盖 foo 内部作用域的闭包,也就是 a,使得 a 一直存活,不会在 foo 结束时被回收。

      2. 闭包的作用

      2.1) 记忆性

      什么是闭包的记忆性

      当闭包产生时,函数所处环境的状态会始终保持在内存中,不会在外层函数调用结束后,被垃圾回收机制回收。

      举个例子:


      function foo() {
         let a = 0;
         return function() {
             a ++;
             console.log(a);
         }
      }
      let foo1 = foo();
      let foo2 = foo();
      foo1();  // 1
      foo2();  // 1
      foo2();  // 2
      foo1();  // 2

      JavaScript闭包详解

      因为 a 属于闭包的一部分,所以当闭包产生时,a 所处的环境状态会保持在内存中,不会随外层函数调用结束后清除,所以随着 foo1的使用,a 都会在内存中的值加 1。
      然后 foo1 和 foo2 产生的闭包是两个独立的闭包,它们互不影响。所以 foo2 第二次调用的时候,是在它自己第一次调用后结果上加 1.

      2.2) 模拟私有变量

      保证一个变量只能被进行指定操作。

      举个例子


      function foo() {
      let A = 0;
      return {
         getA : function() {
             return A;
         },
         add : function() {
             A ++;
         },
         del : function() {
             A --;
         }
      }
      }
      let foo1 = foo();
      console.log(foo1.getA()); // 0
      foo1.add();
      console.log(foo1.getA()); // 1
      foo1.del();
      console.log(foo1.getA()); // 0

      JavaScript闭包详解

      通过闭包,保证了 A 只能被进行指定的 加一,减一操作。

      3. 闭包的注意点

      不能滥用闭包,否则可能会因为内存占用过多而造成网页的性能问题,甚至可能造成内存泄漏。

      总结

      本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注asp之家的更多内容!

      来源:https://blog.csdn.net/m0_51573433/article/details/121462000

      标签:JavaScript,闭包,详解
      0
      投稿

      猜你喜欢

    • Python的MongoDB模块PyMongo操作方法集锦

      2021-02-05 17:59:03
    • 机器学习经典算法-logistic回归代码详解

      2021-05-06 23:56:12
    • MySQL如何快速创建800w条测试数据表

      2024-01-19 09:27:28
    • MySQL 如何查询当前最新事务ID

      2024-01-28 17:23:42
    • 为什么mysql自增主键不是连续的

      2024-01-19 06:59:53
    • vue+el使用this.$confirm,不能阻断代码往下执行的解决

      2024-05-29 22:43:42
    • pytorch中tensor张量数据类型的转化方式

      2022-03-19 20:07:24
    • js DNA动态序列比对代码

      2024-04-16 10:41:26
    • mysql创建数据库,添加用户,用户授权实操方法

      2024-01-14 18:16:58
    • 详解Python数据类型、进制转换、字符串格式化的问题

      2022-11-11 16:24:10
    • python使用glob检索文件的操作

      2022-04-26 19:05:49
    • MySQL中可为空的字段设置为NULL还是NOT NULL

      2024-01-13 14:38:26
    • python标识符命名规范原理解析

      2023-05-28 04:06:42
    • Oracle 9i产品文档

      2010-07-16 13:35:00
    • Python脚本利用adb进行手机控制的方法

      2023-01-31 20:49:47
    • JS实现淡入淡出图片效果的方法分析

      2023-08-24 08:45:44
    • Yii2 assets清除缓存的方法

      2024-05-13 09:51:47
    • python基础教程项目三之万能的XML

      2022-09-22 05:33:25
    • Python中Jupyter notebook快捷键总结

      2022-10-31 18:45:43
    • 详解Python map函数及Python map()函数的用法

      2021-02-13 16:28:07
    • asp之家 网络编程 m.aspxhome.com