js高级 6.闭包

2023-11-10

闭包的理解

  1. 如何产生闭包
    当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(或函数)时,就产生了闭包
  2. 闭包到底是什么
    使用chrome浏览器查看:
    理解一:闭包是嵌套的内部函数(大多数人)
    理解二:包含被引用变量(或函数)的对象(极少数人)
    注意:闭包存在于嵌套的内部函数中
  3. 产生闭包的条件
    1.函数嵌套
    2.内部函数引用了外部函数的数据(变量或函数)
    3.执行外部函数
function fn1(){
	var a = 2;
	var b = 'abc';
	function fn2(){ //执行函数定义就会产生闭包
		console.log(a);
	}
	return fn2;
}
var f = fn1();
f() //3
f() //4

闭包的生命周期

  1. 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
  2. 死亡: 在嵌套的内部函数成为垃圾对象时
    即没有人指向它时死亡,通常置为[null],当然指向其他也行,但不安全(容易污染变量)
//闭包的生命周期
function fn1() {
   //此时闭包就已经产生了(函数提升,实际上[fn2]提升到了第一行, 内部函数对象已经创建了)
   var a = 2
   function fn2 () { //如果时[let fn2=function(){}],那么在这行才会产生闭包
     a++
     console.log(a)
   }
   return fn2
 }
 var f = fn1()
 f() // 3
 f() // 4
 f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

闭包的作用

  1. 使用函数内部的变量在函数执行完后,仍然存活在内存中(延长了局部变量的生命周期)
  2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

问题:
1.函数执行完后,函数内部声明的局部变量是否还存在?//一般是不存在,存在于闭包中的变量才可能存在
2.在函数外部能直接访问函数内部的局部变量吗?//不能,但我们可以通过闭包让外部操作它

闭包的应用:定义js模块

  • 具有特定功能的js文件
  • 将所有的数据和功能都封装在一个函数内部(私有的)
  • 只向外暴露一个包含n个方法的对象或函数
  • 模块的使用者,只需要通过模块暴露的对象调用方法来实现对应的功能

模块定义:

/myModule.js
function myModule() {
  //私有数据
  var msg = 'My atguigu'
  //操作数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }
                                  
  //向外暴露对象(给外部使用的方法)
  return {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
}
                                  
-----------------------------------------------------------------
// myModule2.js   
(function () {
  //私有数据
  var msg = 'My atguigu'
  //操作数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }
                                  
  //向外暴露对象(给外部使用的方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})()    

模块调用

//调用示例
------------  模块调用1 --------------------------------------------
<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">
  var module = myModule()
  module.doSomething()
  module.doOtherthing()
</script>
------------  模块调用2 --------------------------------------------
<script type="text/javascript" src="myModule2.js"></script>
<script type="text/javascript">
  myModule2.doSomething()
  myModule2.doOtherthing()
</script>

闭包的缺点

  1. 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长
  2. 容易造成内存泄露
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js高级 6.闭包 的相关文章

  • 检测 jqGrid 单元格中的复选框事件

    我正在探索jqGrid在我学习 Javascript 和 jQuery 的过程中 我成功地把checkbox在网格单元中 太棒了 这是我所拥有的 myTable jqGrid colModel name cb index cb width
  • 在 javascript 原型事件处理程序中保留“this”引用[重复]

    这个问题在这里已经有答案了 正确的保存方法是什么this存储在对象原型内的事件处理程序中的 javascript 引用 我不想创建像 this 或 that 这样的临时变量 而且我不能使用像 jQuery 这样的框架 我看到很多人谈论使用
  • zone.js:140未捕获类型错误:无法读取属性“删除”

    我是 kendo ui 的新手 我在小提琴中开发了原型 删除确认窗口在那里工作正常 但是当我集成到我的代码库中时 我收到错误 Cannot read property remove at the line pai to delete rem
  • Flex、AngularJS + Masonry、akoenig/angular-deckgrid 等 [重复]

    这个问题在这里已经有答案了 我一直在发送此电子邮件 我即将发布一个用于 Web 应用程序安全的应用程序 它需要使用像 Masonry 这样的网格 我已经尝试过所有的 每一个角度模块 指令和不同的方法 包括基于 CSS 的技术 纯 Vanil
  • JavaScript 画布内存问题

    我在用着getImageData putImageData在 HTML5 画布上能够操作图片 我的问题是浏览器似乎从来没有释放任何内存 http jonelf posterous com lite gc men for sent 直到我关闭
  • Mozilla WebExtension API 存储 - 使用和不使用断点进行调试会导致不同的输出

    大家好 我正在尝试为 Mozilla Firefox 浏览器实现一个附加组件 以下脚本显示了我已经成功集成的一个后台脚本 它使用 Mozilla WebExtension API 存储 它被执行了 但浏览器控制台上的日志让我感到惊讶 我交替
  • 图表.js.如何更改“标签”数组的字体样式?

    我从 Chart JS 库中获取了一个图表 截屏 https i stack imgur com DnuRq png var ctx document getElementById myChart var data labels HTML
  • 玉石压痕错误

    因此 对于我的 Express 网站 我使用 jade 所以我决定尝试修改我的布局文件 以便我可以开始设计我的网站 我修改了原始布局代码 有效 但我开始在任何扩展布局的文件中出现缩进错误 如下所示 500 Error home kevin
  • 如何正确地将节点从引用传递到上下文?

    我正在尝试将节点从引用传递到上下文 但是因为我在第一次渲染后没有重新渲染 所以传递的节 点是null 我考虑了两种变体 但我认为它们不是最好的 To pass ref代替ref current 但在用例中 我将被迫使用类似的东西contex
  • 从 puppeteer PDF 中删除分页符?

    我目前正在尝试查看是否有一种方法可以删除我的 puppeteer PDF 中的分页符 因为我当前的 PDF 设置中的一些分页符正在以一种奇怪的方式切断文本 我正在谈论的内容的屏幕截图 我的傀儡代码 app get companyId pdf
  • 如何在 Windows 网络中的 Intranet Web 应用程序中获取用户的用户名

    我内部有一个简单的 HTML 页面 它只显示一个表单并要求用户填写 我想自动捕获Windows域用户名和机器名 并将其与表单中收集的数据一起提交 我可以在客户端这样做吗 HTML JavaScript 或者我被迫在服务器端执行此操作 我还不
  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go
  • 为什么这个递归函数返回未定义?

    我正在尝试编写一个使用递归组合两个字符串的函数 我的代码如下 但我不知道为什么该函数返回未定义 特别是当我在基本情况下使用 console log 时 它不会打印未定义而是打印正确的值 var str3 function merge str
  • 是否有跨浏览器的方式在Javascript中设置style.float?

    通常 如果您需要在 JavaScript 中设置样式属性 您可以这样说 element style attribute value 虽然略有不同 但属性名称通常与 HTML 属性名称类似 尽管是驼峰式 对我来说问题是 float 属性不起作
  • 为什么浏览器允许onmousedown JS改变href?

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo
  • 为什么 TypeScript 混合了模块和原型模式?

    我正在查看此页面上 TypeScript 生成的 JS 代码 http www typescriptlang org Playground http www typescriptlang org Playground 基本上 要创建一个Gr
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • eventSources 到事件 Json,完整日历

    我正在尝试从 eventSources 获取 json 调用到我的事件 我在 eventSources 中返回的 json 是 title Title Test start 1305841052 当我将此字符串传递到事件中时 它会正确显示日
  • 拉斐尔路径交叉点不起作用

    我对拉斐尔和 pathIntersection method JSFiddle 示例 http jsfiddle net t6gWt 2 您可以看到有两条线都与曲线相交 但当我使用 pathIntersection method 有一个未解

随机推荐

  • 大数据中Linux命令使用的相关操作

    一 常见Linux命令使用 1 cd命令 切换目录 切换到目录 usr local 2 去到目前的上层目录 3 回到自己的主文件夹 ls命令 查看文件与目录 4 查看目录 usr下所有的文件 mkdir命令 新建新目录 5 进入 tmp目录
  • 模块和库的区别

    在编程领域 模块 module 和 库 library 是两个相关但不完全相同的概念 模块 Module 模块是一种组织和封装代码的方式 它是一个包含函数 类 变量等定义的文件 一个模块可以看作是一个独立的单元 它将相关的代码组织在一起 方
  • Xshell连接kali&不成功解决方法

    本文为学习笔记 仅限学习交流 不得利用 从事危害国家或人民安全 荣誉和利益等活动 请参阅 中华人民共和国网络安全法 第一部分 连接 Xshell 官网下载地址 http www netsarang com zh xshell 一 开启Xsh
  • python基础编程小实例2——绝对温标

    编程语言 python3 9 题目 绝对温标的单位为开尔文 简称开 符号为K 绝对温标的零度对应我们日常使用的摄氏温度 单位为摄氏度 简称度 符号为 的 273 15 要求编写代码 实现将用户输入的摄氏温度转换为移绝对温标标识的开氏温度的功
  • Java中String与String的相等判断要用equals

    如题 正确语句 i字符串1 equals 字符串2 错误语句 字符串1 字符串2 在Java中用 比对两个字符串比对的是两个数据的地址值 用equals 比较的才是他们的内容值
  • Python 100 天从新手到大师

    早上好 骚年 我是小菜 我的公众号 菜鸟翻身 会推荐 GitHub 上有用的项目 一分钟 get 一个优秀的开源项目 挖掘开源的价值 我的引语 今天推荐是一个 Python 基础教程 按照教程学习 不出意外 100 天从新手到大师 当下 P
  • disable path和false path的作用与区别

    disable path和false path的作用与区别C 欢迎使用Markdown编辑器 链接 disable与false的相同与不同 false path 指定某一条path 工具计算delay 但不报时序 disable path
  • Java环境变量的配置

    最近有朋友问到环境变量的配置 下面以Windows10系统为例进行Java环境变量配置说明 1 右键点击 此电脑 选择 属性 项 2 点击 高级系统设置 在弹出的系统属性框中 选择 高级 选项卡 默认即显示该选项卡 点击 环境变量 3 在弹
  • 回答问题:你认为AGI应该采用什么思路?

    我是研究AGI基础理论的 我认为AGI要突破首先要对智能的原理有突破 需要建立一套体系描述和解释智能 我认为目前的数学体系有很大的不足 限制了人类对智能的理解 所以需要改革 重新理解一些基础的东西 例如 空间的本质 计算的本质 我认为AGI
  • C++Opencv图像对象Mat的创建和赋值

    Mat中元素的类型以及矩阵的通道个数 它是一系列的预定义的常量 其命名规则为CV 位数 数据类型 通道数 因此在学习图像创建之前先了解一下基本的数据类型 S 有符号整型 U 无符号整型 F 浮点型 CV 8U 8位无符号整数 CV 8S 8
  • Windows CE嵌入式导航系统研究(内核相关)

    1 1 嵌入式车载导航系统的软件设计流程 嵌入式车载系统软件主要包括系统内核 驱动程序 应用程序三部分 设计的过程当中 我们采用瀑布模型进行设计 首先制定Windows CE5 0系统内核 再次编写相关设备驱动 最后编写或移植应用程序 制定
  • 软件测试实验二 白盒测试

    一 实验目的 1 掌握等逻辑覆盖测试法 2 掌握基本路径测试法 3 掌握基于Junit的单元测试 二 实验内容 1 为以下判断等级的程序段设计一组测试用例 要求分别满足语句覆盖 判定覆盖 条件覆盖 判断 条件覆盖 条件组合覆盖 public
  • 809协议nodejs编写笔记

    一 总体流程 数据首先通过receiver接受层接收 去掉标识头和标识尾 再进入depacker解包层进行解包 把标识头分解出来并解析 之后发给handler处理层根据不同的消息id选择使用不同的业务逻辑 如果有应答 则通过sender发送
  • 7.12 redis未授权访问漏洞

    在1 txt添加存在redis未授权访问漏洞的IP redis py输入脚本 redis cli exe h IP p 端口号
  • async/await 异步函数

    1 async异步函数的使用 await async写法 async function foo1 const foo2 async gt 2 async异步函数的执行流程 都是同步代码 跟普通函数代码没区别 async function f
  • RTP - 视频流广播

    这是用RTP RFC3350 按RFC2550封装MPEG ES流数据的发送程序 学习RTP的路真的辛苦 在网上收集的有关RTP的程序都是那种只负责RTP数据包发送的库 如jrtplib等 他们的DEMO 程序都只是用来发发字符串 编编聊天
  • mac mongodb Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols

    mac 下 mongodb 执行命令 mongod 报错 标题为报错的第一句 因为一般人百度的时候都是根据第一句百度 所以起的这个标题 具体报错如下图 我的具体信息如上 可以发现 报错的主要信息在于 没有找到 data 数据的存放路径导致的
  • 【华为OD统一考试A卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一
  • 【数据结构前置知识】初识集合框架和时间,空间复杂度

    文章目录 1 什么是集合框架 2 集合框架的重要性 3 背后所涉及的数据结构以及算法 3 1 什么是数据结构 3 2 容器背后对应的数据结构 3 3 相关java知识 3 4 什么是算法 4 时间复杂度 1 如何衡量一个算法的好坏 2 算法
  • js高级 6.闭包

    闭包的理解 如何产生闭包 当一个嵌套的内部 子 函数引用了嵌套的外部 父 函数的变量 或函数 时 就产生了闭包 闭包到底是什么 使用chrome浏览器查看 理解一 闭包是嵌套的内部函数 大多数人 理解二 包含被引用变量 或函数 的对象 极少