首页 > 其他分享 >js 闭包的概念及应用场景

js 闭包的概念及应用场景

时间:2024-04-26 11:47:59浏览次数:17  
标签:闭包 count 场景 console 函数 function js test1 test

1.概念

是内部函数可以访问外部函数作用域中的变量。

2.来由

由于JavaScript中的函数作用域规则和函数可以作为值传递的特性产生的

3.优点

  • 封装性(可以将变量和函数封装起来,防止外部访问和修改,提高了代码的可维护性和可重用性)
  • 保存状态(即使函数已经执行完毕,状态仍然保存,在事件处理程序可以使用)

4.缺点

  • 内存占用(他会保存内部函数的引用和外部函数的变量,如果没有及时释放闭包,会造成内存泄漏)
  • 性能问题(由于会保存外部函数的变量,导致不能被垃圾回收,尤其是在循环中)

5.常见问题

  • 内存泄漏
  • 代码不易理解和调试(闭包使用函数的作用域扩大,内部函数可以访问外部函数的变量,会增加代码的复杂度)

6.应用场景

  • 封装私有变量和方法

          闭包可以用于创建模块化的代码,可以隐藏变量和方法,只暴露需要的接口,这样可以避免全局命名空间污染,并且可以增加代码的可维护性。

var test=(function(){
var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
} )()

test.increment(); // 输出 1
test.increment(); // 输出 2
test.decrement(); // 输出 1
  • 保存函数状态

          即使函数已经执行完毕,状态任然保存。例如在事件处理程序中保存计数器状态,非常有用

function test() {
  var count = 0;

  return function() {
    count++;
    console.log(count);
  };
}
let test1=test();
let test2=test();

test1();   //1
test1();  //2

test2();  //1
test2()   //2
  • 实现函数柯里化

         就是将多个参数的函数转化为接受单个参数的函数,形成函数链

function test(x){
   return function(y){
     return x+y
   }
}

let test1=test(2);
console.log(test1(3));   //5
console.log(test1(5))   //7

  

 

标签:闭包,count,场景,console,函数,function,js,test1,test
From: https://www.cnblogs.com/susu2020/p/18159671

相关文章

  • Chartist.js折线图(三)
    事件替换图形代码如下<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><div......
  • Chartist.js折线图(二)
    折线散点图代码如下<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><divc......
  • Chartist.js折线图
    数据漏洞代码案例<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><divcl......
  • Redis场景
    redis应用场景Redis在缓存和队列方面有着广泛的应用场景,下面详细介绍一下:缓存应用场景:页面缓存:在Web应用中,Redis可以用作页面缓存,存储页面渲染结果,以减轻数据库的压力,提高页面响应速度。当用户请求某个页面时,首先检查Redis中是否存在该页面的缓存,如果存在则直接返回缓......
  • Js链式调用面试题
    Js链式调用需求:要求可以链式调用对象的方法,该对象有四个方法,加减乘除,一个get结果方法eg:counter.add(3).sub(1).get()//2方法一通过Es6实现classCounter{privateresult=0;add(val:number){this.result+=val;returnthis;}sub(val:nu......
  • vue3+vite+js 引用public文件夹中js文件
    vue的public的资源在打包时不会被编译,只会copy所以在在src路径下引入public文件夹下的图片、视频、音频,编译不会改变其路径,但是在src下引入public文件夹下的js、json,在打包时都会被编译,所以直接引入会丢失路径(因为打包时,当前页面引入的路径被hash打包,而public文件夹下只是被cop......
  • js逆向实战之喜马拉雅Xm-Sign参数解密
    url:https://www.ximalaya.com/channel/11/分析过程抓包,关注有页面数据回显的数据包。该url的请求头中有个加密的参数,找到该参数的加密过程。由于该参数名比较不常见,可以直接全局搜索这个参数名。只有一处,打断点。切换页码,触发断点。非常直接,xm-sign是由d.getS......
  • 2024年vue 开发环境 Node.js于win10环境下的安装
    2024年vue开发环境Node.js于win10环境下的安装导航2024年vue开发环境Node.js于win10环境下的安装导航一、下载node.js二、安装node.js三、测试(一)四、环境配置五、测试(二)六、安装淘宝镜像七、安装vue脚手架一、下载node.jsNode.js官方网站下载:https://nodejs.org/en......
  • threejs 父元素 相对位置 position 网格对象
    设置position都是相对于父元素的位置设置的//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene'......
  • 说说你对二分查找的理解?如何实现?应用场景?
     一、是什么在计算机科学中,二分查找算法,也称折半搜索算法,是一种在有序数组中查找某一特定元素的搜索算法想要应用二分查找法,则这一堆数应有如下特性:存储在数组中有序排序搜索过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜索过程结束如果某一特定元素大......