您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

深入了解什么是JS中的闭包

时间:2022-01-21 10:03:55  来源:  作者:编程小帅

什么是闭包?相信很多人听了有点懵,然后去百度查了一下官方的定义“闭包就是能够读取其他函数内部变量的函数”发现感觉自己更懵了。关于闭包如果只看那官方的定义的话确实不是让人很容易理解。

要想理解什么是闭包,首先得弄清楚什么是作用域,作用域可以理解为一个变量可以使用的范围。

JAVAScript 中有两种作用域类型:

  • 局部作用域

JavaScript 函数中声明的变量会成为函数的局部变量。局部变量的作用域是局部的所以只能在函数内部访问它们。

  • 全局作用域

函数外声明的变量属于全局变量。全局变量的作用域是全局的所以网页的任意部分和函数都能够访问它。

有了作用域做铺垫,再来学习闭包就容易多了。

function f1(){
    var n=10;//局部变量n
    					//在f1函数内部声明的f2函数
    function f2(){
      alert(n);
    }
    return f2;//将f2函数作为f1函数的返回值
  }
  var fobj=f1();//f1调用完后的返回值是一个f2函数,此时fobj就是f2函数
  fobj(); // 输出10,调用f2函数

上述代码就是一个简单的闭包函数,闭包的用处有两个,一个是可以读取函数内部的变量,另一个就是在内存中让这些变量的值始终保持。

  function f1(){
    var n=5;//局部变量n
    add=function(){  //fdd前面没有使用var关键字,因此add是一个全局变量的匿名函数
      						n+=1
    					}
   					 //在f1函数内部声明的f2函数
    function f2(){
      alert(n);
    }
    return f2;
  }
  var fadd=f1();
  result(); // 输出5
  add();
  fadd(); // 输出6

从上面这段代码中可以看出,fadd就是闭包f2函数。它一共运行了两次,第一次的值是5,第二次的值是6。这证明函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。因为f1是f2的父函数,而f2相当于赋给了f1一个全局变量,所以f2一直在内存中。而f2的存在又依赖于f1,因此f1也一直在内存中,不会在调用结束后回收。

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



Tags:JS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
什么是闭包?相信很多人听了有点懵,然后去百度查了一下官方的定义“闭包就是能够读取其他函数内部变量的函数”发现感觉自己更懵了。关于闭包如果只看那官方的定义的话确实不是...【详细内容】
2022-01-21  Tags: JS  点击:(11)  评论:(0)  加入收藏
1.把JSP页面放在WEB-INF目录下,存放在此目录或者它的子目录里的任何东西都受到了保护。2.使用servlet过滤器过滤对jsp页面的请求。import javax.servlet.*; import javax.ser...【详细内容】
2022-01-04  Tags: JS  点击:(19)  评论:(0)  加入收藏
远程代码漏洞对广大程序员来并不陌生,远程代码执行是指攻击者可能会通过远程调用的方式来攻击或控制计算机设备,无论该设备在哪里。如果远程代码执行的是一个死循环那服务器...【详细内容】
2021-12-31  Tags: JS  点击:(20)  评论:(0)  加入收藏
前言几乎所有.NET序列化程序的实现基础都是反射。下列代码是Newtonsoft.Json的实现:protectedvirtualJsonPropertyCreateProperty(MemberInfomember,MemberSerializationmemb...【详细内容】
2021-12-28  Tags: JS  点击:(40)  评论:(0)  加入收藏
前言JDBC访问Postgresql的jsonb类型字段当然可以使用Postgresql jdbc驱动中提供的PGobject,但是这样在需要兼容多种数据库的系统开发中显得不那么通用,需要特殊处理。本文介绍...【详细内容】
2021-12-23  Tags: JS  点击:(50)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  Tags: JS  点击:(39)  评论:(0)  加入收藏
前言前几天有粉丝在群里问了一个json文件处理的问题。看上去他只需要follower和ddate这两个字段下的对应的值。我们知道json是一种常见的数据传输形式,所以对于爬取数据的数...【详细内容】
2021-12-07  Tags: JS  点击:(58)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Tags: JS  点击:(57)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  Tags: JS  点击:(63)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  Tags: JS  点击:(66)  评论:(0)  加入收藏
▌简易百科推荐
什么是闭包?相信很多人听了有点懵,然后去百度查了一下官方的定义“闭包就是能够读取其他函数内部变量的函数”发现感觉自己更懵了。关于闭包如果只看那官方的定义的话确实不是...【详细内容】
2022-01-21  编程小帅    Tags:JS   点击:(11)  评论:(0)  加入收藏
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十...【详细内容】
2022-01-04  锋享前端    Tags:Javascript   点击:(21)  评论:(0)  加入收藏
说明面向对象的三个基本特征是:封装、继承、多态。call函数:预定义的JavaScript方法,用来调用所有者对象作为参数的方法。上节内容:面向对象,类、对象、属性、方法,静态属性和方法...【详细内容】
2022-01-04  IT小奋斗    Tags:JavaScript   点击:(22)  评论:(0)  加入收藏
JavaScript 的故事很长。在今天,JavaScript 的运行从移动设备到服务器端,无论您是计划在 2022 年学习或使用 JavaScript ,还是目前正在使用JavaScript进行开发,还是已经熟练掌握...【详细内容】
2021-12-30  Mason程    Tags:JavaScript   点击:(22)  评论:(0)  加入收藏
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(23)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(36)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(39)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(34)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(55)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(55)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条