首页 > 其他分享 >JS中的闭包

JS中的闭包

时间:2022-11-21 22:02:08浏览次数:34  
标签:闭包 function 函数 f1 JS 内存 var

  1. 闭包闭包是什么很多小伙伴在面试的时候都会被问到闭包是什么? 举例说明下闭包的运用?闭包(closure)是javascript的一大难点,也是它的特色。很多高级应用都要依靠闭包来实现。要理解闭包,首先要理解javascript的全局变量和局部变量。javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。定义闭包就是能够读取其他函数内部变量的函数。由于在javascript中,只有函数内部的子函数才能读取局部变量,所以说,闭包可以简单理解成“定义在一个函数内部的函数“。所以,在本质上,闭包是将函数内部和函数外部连接起来的桥梁如何从外部读取函数内部的局部变量?我们有时候需要获取到函数内部的局部变量,正常情况下,这是办不到的!只有通过变通的方法才能实现。那就是在函数内部,再定义一个函数。以上的写法是闭包吗?这种方式也可以实现呀,而且还更加的清晰,更简单function f1(){var a=10;function f2(){alert(a);}f2()};f1();//可以获取到局部变量afunction f1(){var a = 10;  return a;}f1();【升职加薪 只争朝夕】资料获取:zhaoxi0061
  2. 为什么需要闭包闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会在f1调用后被自动清除。总结:局部变量无法共享和长久的保存,而全局变量可能造成变量污染,当我们希望有一种机制既可以长久的保存变量又不会造成全局污染。闭包的写法:简化写法:继续哆嗦:闭包就是一个函数引用另外一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装私有变量,这是优点也是缺点,不必要的闭包只会徒增内存消耗!Javascript垃圾回收机制JS自带一套内存管理引擎,负责创建对象、销毁对象,以及垃圾回收内存泄漏内存泄漏指申请的内存一直得不到释放,GC回收不了。一般在项目中就是,你创建的对象一直保存在内存中,可达但你把它的引用地址搞丢了结果没法操作它,而GC又不会回收这块内存。内存泄漏的危害就是堆积耗尽系统所有内存。虽然有垃圾回收机制但是我们编写代码操作不当还是会造成内存泄漏。1.意外的全局变量引起的内存泄漏。原因:全局变量,不会被回收。解决:使用严格模式避免。2.闭包引起的内存泄漏function f1() {var a=10;function f2(){a++;console.log(a);};return f2;};var f = f1();  f();当f()在不断调用时,a的状态会被保存,不会在f1()执行完后释放function f1() {var a=10;return function(){a++;console.log(a);};};var f = f1();  f();【升职加薪 只争朝夕】资料获取:zhaoxi0061
  3. 原因:闭包可以维持函数内局部变量,使其得不到释放。解决:将事件处理函数定义在外部,解除闭包,或者在定义事件处理函数的外部函数中,删除对dom的引用。3.没有清理的DOM元素引用原因:虽然别的地方删除了,但是对象中还存在对dom的引用解决:手动删除。4.被遗忘的定时器或者回调原因:定时器中有dom的引用,即使dom删除了,但是定时器还在,所以内存中还是有这个dom。解决:手动删除定时器和dom。5.子元素存在引用引起的内存泄漏原因:div中的ul li得到这个div,会间接引用某个得到的li,那么此时因为div间接引用li,即使li被清空,也还是在内存中,并且只要li不被删除,他的父元素都不会被删除。利用闭包封装原生XMLHttpRequest请求页面调用:function Http(){    var xmlhttp = new XMLHttpRequest();    var _url = "http://localhost:3333";    return {request: function(method,url,data,success,error){  //method:请求类型,url:接口地址,data:参数xmlhttp.open(method, _url+url); //异步if(method == 'GET') {xmlhttp.send();}else {xmlhttp.setRequestHeader("Content-Type","application/json");  //请求头xmlhttp.send(data); //发送};xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {console.log(xmlhttp.responseText) ;success(xmlhttp.responseText);}}}    }}【升职加薪 只争朝夕】资料获取:zhaoxi0061
  4. function sendData(mobile,password){        var data = JSON.stringify({                mobile:mobile,                password:password            });        Http().request('POST','/form_login',data,                function(res){                    var items = JSON.parse(res);                    console.log(items);                }        )

标签:闭包,function,函数,f1,JS,内存,var
From: https://www.cnblogs.com/itjeff/p/16913512.html

相关文章

  • axios二次封装-main.js使用
    axios封装:配置代理:axios封装:axios的二次封装:请求拦截统一token处理:引入:使用:导入:响应拦截统一错误处理:导入:main.js:login页面:效果:请求:我们要请求......
  • App开发_表情包json
    [["表情","......
  • Node.js 15正式版发布
    英文| https ://medium.com/@nodejs/node-js-v15-0-0-is-here-deb00750f278前两天,Node.js官方发布了Node.js15的正式版本,Node.js15将替代Node.js14成为当前的稳定发行......
  • 踩坑JSTL标签库:/WEB-INF/jsp/fore/home.jsp (行.: [3], 列: [0]) 无法在web.xml或使用
    Tomcat9及之前使用到的JSTL库最近心血来潮想复习一下JavaWEB,调试JSTL标签的时候出现了一些错误,如标题所示。先说下场景,我已经在:WEB-INF/lib下添加了Tomcat9使用JSTl需要用......
  • JS对象RegExp2和JS对象RegExp3
    JS对象RegExp2:1.正则对象:1.创建1.varreg=new_RegExp(""正则表达式"");2.varreg=/正则表达式/;2.方法1.test(参数):验证指定的字符串是否符合正则定义的规范......
  • JS字符串
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body><script>varx="John";......
  • js-004-表格操作
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格操作</title><style>.add{width:500px;height:......
  • JS对象Function和JS对象RegExp1
    JS对象Function:Function:函数(方法)对象1.创建:1.varfun=newFunction(形式参数列表,方法体); //忘掉吧2.function方法名称(形式参数列表){方法体}3.......
  • 20221115 JsonFactory、JsonParser、JsonGenerator
    参考资料[享学Jackson]二、jackson-core之流式API与JsonFactory、JsonGenerator、JsonParserJackson用法大全概述JsonParser、JsonGenerator、JsonFactory位于j......
  • 20221121 Jackson JSON【归档】
    参考资料FasterXML·GitHubJacksonReleasesJackson解析JSON详细教程jackson处理json初识Jackson——世界上最好的JSON库Jackson详解[享学Jackson]......