当前位置: 首页 > 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定义域为自然数,值域非负实数集定义: …...

Hive parquet表通过csv文件导入数据

1. background 已建好了 hive parquet 格式的表, 需要从服务器的csv导入数据至该hive表 2. step 提前上传csv至服务器 /path/temp.csv 创建 textfile 格式的中转表(这里使用内部表,方便删除) ,源表名dw_procurement.dwd_tc_comm_plant ,这里中转表加上了csv后缀 CREATE TA…...

C++ 构造函数最佳实践

文章目录 1. 构造函数应该做什么1.1 初始化成员变量1.2 分配资源1.3 遵循 RAII 原则1.4 处理异常情况 2. 构造函数不应该做什么2.1 避免做大量的工作2.2 不要在构造函数中调用虚函数2.3 避免在构造函数中执行复杂的初始化逻辑2.4 避免调用可能抛出异常的代码 3. 构造函数的其他…...

C++——关联式容器(4):set和map

在接触了诸如二叉搜索树、AVL树、红黑树的树形结构之后,我们对树的结构有了大致的了解,现在引入真正的关联式容器。 首先,先明确了关联式容器的概念。我们之前所接触到的如vector、list等容器,我们知道他们实际上都是线性的数据结…...

Spring Mybatis 基本使用 总结

1. 简介 Mybatis库可以简化数据库的操作&#xff0c;专注于sql语句。 2.搭建步骤 2.1 在pom.xml引入mybatis <dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.11</version> </dep…...

接口幂等性和并发安全的区别?

目录标题 幂等性并发安全总结 接口幂等性和并发安全是两个不同的概念&#xff0c;虽然它们在设计API时都很重要&#xff0c;但侧重点不同。 幂等性 定义&#xff1a;幂等性指的是无论对接口进行多少次相同的操作&#xff0c;结果都是一致的。例如&#xff0c;HTTP的PUT和DELE…...

【记录一下VMware上开虚拟端口映射到公网】

材料 win11 和装在vmware上的ubuntu 步骤一在Ubuntu上配置静态地址&#xff0c;配置如下 vim /etc/netplan/01-network-manager-all.yaml(此文件看系统上对应的是哪个文件&#xff0c;建议先备份)network:version: 2renderer: NetworkManagerethernets:ens33:dhcp4: falseadd…...

半导体器件制造5G智能工厂数字孪生物联平台,推进制造业数字化转型

半导体器件制造行业作为高科技领域的核心驱动力&#xff0c;正积极探索和实践以5G智能工厂数字孪生平台为核心的新型制造模式。这一创新不仅极大地提升了生产效率与质量&#xff0c;更为制造业的未来发展绘制了一幅智能化、网络化的宏伟蓝图。 在半导体器件制造5G智能工厂中&a…...

数据结构之存储位置

p 和 "hello,world"存储在内存哪个区域&#xff1f;( ) (鲁科安全) int main() { char *p "hello,world"; return 0; } p是栈区&#xff0c;”hello,world”是.ro段 一个由C/C编译的程序&#xff0c;会将占用的内存分为几个部分&#xff1a;堆、栈、代…...

传输层协议(TCP和UDP)

目录 一、UDP 1、UDPAPI 2、UDPAPI的使用 二、TCP 1、TCPAPI 2、TCP的相关特性 2.1 确认应答 2.2 超时重传 2.3 连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09; 2.4 滑动窗口 2.5 流量控制 2.6 拥塞控制 2.7 延时应答 2.8 捎带应答 2.9 面向字节…...

智能仓库|基于springBoot的智能无人仓库管理设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xf…...