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

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...