当前位置: 首页 > news >正文

javascript的闭包学习

为什么要产生闭包的概念,通俗来说一下。

公司有一个项目,分为两个部分,张三、李四各分配一个部分。

张三.js代码:

var key='我要吃肉'
function fn(){console.log(key);
}

李四.js代码:

var key='我要喝酒'
function fn(){console.log(key);
}

如果在张三.js或者李四.js代码中分别运行,都没有问题。不过,这是一个网页项目的两部分,需要综合到一起去执行,此时就出现了问题。

我的本意是张三的执行,李四的也执行。实际情况:

只执行了李四的fn,如图。

如果js代码中不用var定义变量,而是用let定义变量,就会更明确的显示出问题。

那就是在 first_js.html这个总项目中,张三和李四的变量、函数名等重复定义了。

闭包就是为了解决这个问题。

那么,如何解决呢?

这就是需要“作用域”这个概念。也就是,在函数内部定义的变量,只在这个函数内有效。

对了,程序员很机智,给张三.js和李四.js的代码,分别用一个函数包含起来,它们不就分别有自己的独立空间了吗?对,这就是闭包。闭:就是封闭的环境(函数内)存放局部变量和方法。包:就是在这个环境中,实现想要的功能。

代码就变成了这样:

再多想一步,既然这个所谓的外部函数的作用只是给出一个独立的空间,它们的名字是不是就略显多余呢?

这时,就自然想到了自运行函数。

这里还有个问题,张三和李四虽然有了自己的空间,那么它们想要实现的功能(函数),怎么让总项目所使用呢?

好办,那就分别导出其功能函数就行了。 【注意:此时返回的变量是一个函数】

这样,在总项目中,分别运行zs()和ls()就可以了。

进一步思考,如何张三.js和李四.js需要实现多个功能,该如何导出呢?

将导出函数变为导出对象(对象中有多个功能函数)就行了。【注意:此时返回的变量是一个对象】

在总项目中,依次调用:

结果正确。

至此,就解决了各个分项目中存在同变量名冲突的问题。

张三和李四再也不用为自己代码中的变量名称冲突而烦恼了。

这就是闭包的来源和作用。 

小知识:自运行函数的格式(张三.js为自运行函数,李四.js为普通函数的运行)

相关文章:

javascript的闭包学习

为什么要产生闭包的概念,通俗来说一下。 公司有一个项目,分为两个部分,张三、李四各分配一个部分。 张三.js代码: var key我要吃肉 function fn(){console.log(key); } 李四.js代码: var key我要喝酒 function fn…...

JavaScript高级—— js 是单线程运行的

1、如何证明 js 执行时单线程的? ① setTimeout()的回调函数是在主线程执行的 ② 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行 2、为什么 js 要用单线程模式,而不用多线程模式? ① JavaScript 的单…...

Java 微服务框架 HP-SOA v1.1.4

HP-SOA 功能完备,简单易用,高度可扩展的Java微服务框架。 项目主页 : https://www.oschina.net/p/hp-soa下载地址 : https://github.com/ldcsaa/hp-soa开发文档 : https://gitee.com/ldcsaa/hp-soa/blob/master/README.mdQQ Group: 44636872, 66390394…...

代码随想录Day 52|题目:101.孤岛的面积、102.沉没孤岛、103.水流问题、104.建造最大岛屿

提示:DDU,供自己复习使用。欢迎大家前来讨论~ 文章目录 图论part03题目一:101.孤岛的总面积解题思路DFS**BFS** 题目二:102. 沉没孤岛解题思路 题目三:103. 水流问题解题思路优化 题目四:104.建造最大岛屿…...

go webapi上传文件

一、导入依赖 import "net/http" 我这里用到了Guid所以安装依赖 go get github.com/google/uuid 二、main.go package mainimport ("fmt""github.com/jmoiron/sqlx""github.com/tealeg/xlsx""log""path/filepath&q…...

【小沐学GIS】基于Openstreetmap创建Sionna RT场景(Python)

文章目录 1、简介1.1 blender 2、下载和安装2.1 Python2.2 jupyter 3、运行结语 1、简介 1.1 blender https://www.blender.org/ Blender 是一款免费开源的3D创作套件。 使用 Blender,您可以创建3D可视化效果,例如静态图像、3D动画、VFX(…...

网安面试题1

深信服厂商面 自我介绍 我看到你介绍里面有提到独立设计网络拓扑图,你知道内网有哪些攻击途径吗 护网红队有什么成果 sql注入有哪些类型 sql注入的防御方式 讲一个你工作中遇到的应急响应 怎么判断内网的攻击是不是真实攻击 Windows中了勒索病毒你应该怎么办 linux被…...

你了解system V的ipc底层如何设计的吗?消息队列互相通信的原理是什么呢?是否经常将信号量和信号混淆呢?——问题详解

前言:本节主要讲解消息队列, 信号量的相关知识。 ——博主主要是以能够理解为目的进行讲解, 所以对于接口的使用或者底层原理很少涉及。 主要的讲解思路就是先讨论消息队列的原理, 提一下接口。 然后讲解ipc的设计——这个设计一些…...

python爬虫初体验(一)

文章目录 1. 什么是爬虫?2. 为什么选择 Python?3. 爬虫小案例3.1 安装python3.2 安装依赖3.3 requests请求设置3.4 完整代码 4. 总结 1. 什么是爬虫? 爬虫(Web Scraping)是一种从网站自动提取数据的技术。简单来说&am…...

ER 图 Entity-Relationship (ER) diagram 101 电子商城 数据库设计

起因, 目的: 客户需求, 就是要设计一个数据库。 过程, 关于工具: UI 设计,我最喜欢的工具其实是 Canva, 但是 Canva 没有合适的模板。我用的是 draw.io, 使用感受是,很垃圾。 各种快捷键不适应,箭头就是点不住&…...

JavaSE--IO流总览06:字符转换输入(输出)流: InputStreamReader ,OutputStreamWrite

IO流体系(学到哪扩展到哪): 学习字符转换流的目的是为了什么? InputStreamReader---解决不同编码时字符流读取文本内容乱码的问题 OutPutStreamWrite---可以控制写出去的字符使用什么字符集编码 为什么会有乱码呢?因为读取的文件内容编码与…...

浙版传媒思迈特软件大数据分析管理平台建设项目正式启动

近日,思迈特软件与出版发行及电商书城领域的领军企业——浙江出版传媒股份有限公司,正式启动大近日,思迈特软件与出版发行及电商书城领域的领军企业——浙江出版传媒股份有限公司,正式启动大数据分析管理平台建设项目。浙版传媒相…...

漏洞——CVE简介

1、什么是CVE CVE (Common Vulnerabilities and Exposures)(常见漏洞与暴露)是一个标准化的命名系统,用于识别和描述公开披露的网络安全漏洞。CVE 的目的是为漏洞提供唯一的标识符,使安全专家、软件供应商和用户能够统一参考和讨…...

IT行业中的技术趋势与未来展望

IT行业中的技术趋势与未来展望 IT行业作为全球经济发展的重要引擎,正在以惊人的速度推动着科技进步与创新。随着技术的不断演进,一些新的趋势正悄然改变着我们的工作方式和生活方式。本文将探讨当前IT行业中的主要技术趋势以及未来展望,帮助…...

解决 webpack 配置 sass-loader后报错,无法正常build

1. 问题描述 总是打包build报错,本质上css样式语法也没写错在使用 sass-resources-loader 的项目中,开发者常常遇到构建错误或意外的样式行为,这是因为 sass-resources-loader 的作用和使用场景并不总是被正确理解。sass-resources-loader 主…...

CentOS中使用DockerCompose方式部署带postgis的postgresql(附kartoza/docker-postgis镜像下载)

场景 CentOS中使用Docker部署带postgis的postgresql: CentOS中使用Docker部署带postgis的postgresql_centos postgis插件在容器中如何安装-CSDN博客 上面使用Docker搜索和拉取kartoza/postgis时并没有任何限制。 当下如果不能科学上网时,大部分镜像源…...

初识elasticsearch

初识elasticsearch 1.什么是elasticsearch 一个开源的分布式搜索引擎,可以用来实现搜索、日志统计、分析、系统监控等功能;elasticsearch 是结合kibana、Logstash、Beats,也就是elastic stach(ELK)。被广泛应用在日志数据分析、实时监控等领域。 elastic…...

react hooks--React.memo

基本语法 React.memo 高阶组件的使用场景说明: React 组件更新机制:只要父组件状态更新,子组件就会无条件的一起更新。 子组件 props 变化时更新过程:组件代码执行 -> JSX Diff(配合虚拟 DOM)-> 渲…...

App端测——稳定性测试

稳定性测试项:Crash、ANR、OOM、内存泄漏 crash:应用崩溃,从提测后开始关注,monkey持续上报跟踪 ANR:系统无响应,使用低端机内存小的机型测试,及monkey中关注ANR问题。关于ANR详细&#xff1a…...

[数据结构与算法·C++] 笔记 1.4 算法复杂性分析

1.4 算法复杂性分析 算法的渐进分析 数据规模 n 逐步增大时, f(n)的增长趋势当 n 增大到一定值以后,计算公式中影响最大的就是 n 的幂次最高的项其他的常数项和低幂次项都可以忽略 大O表示法 函数f,g定义域为自然数,值域非负实数集定义: …...

Stitches项目架构分析:RequireJS模块化设计与Grunt构建流程完全指南 [特殊字符]

Stitches项目架构分析:RequireJS模块化设计与Grunt构建流程完全指南 🚀 【免费下载链接】stitches HTML5 Sprite Sheet Generator 项目地址: https://gitcode.com/gh_mirrors/sti/stitches Stitches是一个基于HTML5的雪碧图生成器,它采…...

GEMM内核与MHA中的寄存器分配优化策略

1. GEMM内核与寄存器分配基础解析通用矩阵乘法(GEMM)作为深度学习计算的核心算子,其性能表现直接决定了神经网络训练和推理的效率。在硬件层面,寄存器分配的优劣往往能带来数倍的性能差异。我们以典型的GEMM运算C αAB βC为例&…...

除了排错,你可能不知道OPC Expert v8.1还能做这些:数据归档、计算与冗余实战

解锁OPC Expert v8.1的隐藏潜力:数据归档、实时计算与冗余架构实战指南在工业自动化领域,OPC Expert常被视为故障排查的"急救箱",但它的能力远不止于此。当大多数工程师还在用它解决DCOM配置问题时,少数先行者已经用它重…...

别只拿PotPlayer看片了!挖掘它的采集录制功能,做Switch游戏存档大师

别把PotPlayer当普通播放器!解锁它的Switch游戏录制黑科技 你是否已经厌倦了在OBS、Bandicam等专业录制软件中反复调试参数的繁琐?是否想过那个每天用来看视频的PotPlayer,其实隐藏着令人惊喜的游戏录制能力?今天,我们…...

内存占用3KB!极致瘦身释放MCU无限可能

极致小体积,给工业领域带来了无限的可能:更低硬件成本,更小芯片体积,更低功耗,更高可靠性,让每一颗小MCU都拥有大系统的完整能力。 https://www.bilibili.com/video/BV1eZLi6PEjc/?spm_id_from333.1387.ho…...

基于ESP32与MQTT的家庭环境监测系统:从传感器选型到数据可视化实战

1. 项目概述与核心价值最近几年,我身边越来越多的朋友开始关注家里的空气质量、温湿度这些看不见摸不着,但又实实在在影响生活舒适度和健康的环境指标。从新装修的房子担心甲醛,到有老人小孩的家庭在意PM2.5和二氧化碳浓度,再到南…...

别被忽悠了!2026亲测靠谱的AI论文网站|避坑精选版

2026 年学术写作工具已高度分化,千笔AI与ThouPen为全流程首选,豆包、DeepSeek 为专项强手;避坑关键:拒绝假文献、严控 AIGC 率、优先国内适配、免费试用先行。 一、TOP3 全流程首选(亲测不踩雷) 1. 千笔AI&…...

Mysql:事务管理(中)

在前面的章节中,我们提到了 MVCC(多版本并发控制),它巧妙地通过“版本快照”解决了“读-写”冲突,实现了非阻塞读。但如果两个事务同时执行 UPDATE 操作修改同一行数据,即 写-写(Write-Write&am…...

Sora 2 MOV导出画质崩坏真相:HDR10元数据丢失、BT.2020色域截断、帧率标志位误写——3大隐性缺陷紧急修复方案

更多请点击: https://intelliparadigm.com 第一章:Sora 2 MOV导出画质崩坏的系统性认知 Sora 2 在生成高保真视频后,导出为 MOV 格式时频繁出现色度抽样失真、动态范围压缩、帧间伪影加剧等现象,其本质并非单一环节失效&#xff…...

操作符从浅入深的讲解

1. 操作符的分类 2. ⼆进制和进制转换 3. 原码、反码、补码 4. 移位操作符 5. 位操作符:&、|、^、~ 6. 单⽬操作符 7. 逗号表达式 8. 下标访问[]、函数调⽤() 9. 结构成员访问操作符 10. 操作符的属性:优先级、结合性 11. 表达式求值1.操作符的分类以…...