JavaScript 如何使用闭包

闭包基本上是内部函数可以访问其范围之外的变量,可用于实现隐私和创建函数工厂

定义一个数组,循环遍历这个数组并在延迟3秒后打印每个元素的索引

先看一个不正确的写法:

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {setTimeout(function() {alert('The index of this number is: ' + i);console.log('The index of this number is: ' + i);}, 3000);
}

看下执行效果

clipboard.png

如上图:3秒后每次都是打印4,而不是0123

原因:因为setTimeout函数创建的是一个可以访问其外部作用域的函数(闭包),该作用域包含索引i的循环。经过3秒后,i的值已经变为4

正确的写法:
写法一:

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {setTimeout(function(i_local){return function () {alert('The index of this number is: ' + i_local);console.log('The index of this number is: ' + i_local);}}(i), 3000)
}

clipboard.png

写法二:

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {setTimeout(function() {alert('The index of this number is: ' + i);console.log('The index of this number is: ' + i);}, 3000);
}

clipboard.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ai中导入sketch_在Sketch中营造深度感

ai中导入sketchCreating a user interface with depth can seem daunting at first, but it only requires you to understand one fundamental rule — emulating a light source.首先&#xff0c;创建具有深度的用户界面似乎很艰巨&#xff0c;但这仅要求您了解一个基本规则-…

Python3+PyCharm+selenium3 环境搭建

安装Python3请去python官网下载安装包&#xff0c;我用的是Python3.6安装PyCharm&#xff0c;这个也是去官网自己下吧&#xff0c;偶的是2018.2.3&#xff08;CommunityEdition&#xff09;接下来安装seleniumPyCharm中Tremianl安装完成后&#xff0c;在python Console中输入没…

2021 年最值得了解的 Node.js 工具

大家好&#xff0c;我是若川。今天分享一篇用得上的 node 库 链接地址&#xff1a;https://github.com/huaize2020/awesome-nodejs❝前言&#xff1a;文章的灵感来源于&#xff0c;社群中某大佬分享一个自己耗时数月维护的github项目 awesome-nodejs 。或许你跟我一样会有一个疑…

figma下载_何时在Figma中使用组或框架

figma下载Groups and Frames have very different uses in Figma, but it’s difficult at first to tell why both of them exist. I can assure you that they complement each other, but first, you need to understand the nuances of each. I’ll show you how to make t…

迈入现代 Web 开发(GMTC 2021 演讲全文)

前言&#xff1a;希望像做游戏一样做 Web 开发的 dexteryy 同学今天在 GMTC 技术大会上又搞了一场「跨年演讲」&#xff08;内容超多的意思&#xff09;&#xff0c;不但现场爆满、超时严重&#xff0c;而且一如既往的讲完之后只要把讲稿和幻灯片拼起来就能发出来&#xff0c;大…

注释标记的原则_它关系到平台如何标记操纵的媒体。 这是设计师应遵循的12条原则。

注释标记的原则By Emily Saltz, Tommy Shane, Victoria Kwan, Claire Leibowicz, Claire Wardle埃米莉萨尔茨 ( Emily Saltz) &#xff0c; 汤米沙恩 ( Tommy Shane) &#xff0c; 关 颖琳 ( Victoria Kwan) &#xff0c; 克莱尔莱博维奇 ( Claire Leibowicz) &#xff0c; 克莱…

saltapi java_搭建基于Jenkins salt-api的运维工具

1. 安装salt-master和salt-minion安装过程不再赘述&#xff0c;请参考http://docs.saltstack.com/en/latest/topics/installation/index.html2. 安装salt-api&#xff0c;cherrypy用来jenkins与salt通信启用salt-api在salt master的配置文件中添加rest_cherrypy:port: 8010host…

他开发了redux,昨晚字节一面却挂了?

大家好&#xff0c;我是若川&#xff0c;诚邀你进群交流学习。今天分享一次直播的记录。我写过redux源码文章。动手按照文中例子学习&#xff0c;我相信会有所收获。学习源码系列、面试、年度总结、JS基础系列redux的作者是谁&#xff1f;Dan&#xff0c;他的全称叫做Dan Abram…

高通董事长:努力降低智能手机价格

高通董事长&#xff1a;努力降低智能手机价格 高通公司董事长兼CEO保罗雅各布近日表示&#xff0c;2011年高通除了继续与各方合作提供高端及各层次智能手机外&#xff0c;将更加致力于降低智能手机的价格。 手机将成为个人生活中心 作为移动通信芯片领域的霸主&#xff0c;高通…

mysql数据库的新特性_【数据库】MySQL新特性归档介绍

MySQL 8.0.17发布了&#xff0c;看了下release note&#xff0c;发现果真如之前预期的那样&#xff0c;恢复了redo log归档(redo log archiving)功能。之所以说是“恢复”&#xff0c;那是因为在InnoDB非常古老的版本(MySQL 4.0.6之前的版本)才存在&#xff0c;之后就取消了&am…

为什么同事写的代码那么优雅~

大家好&#xff0c;我是若川&#xff0c;诚邀你进群交流学习。今天分享一篇相对轻松的代码简洁之道。学习源码系列、面试、年度总结、JS基础系列内容出自《代码整洁之道》、Alex Kondov[1]的博文tao-of-react[2]和《Clean Code of Javascript》image.png代码整洁有什么用&#…

2021 年最值得了解的 Node.js 工具(下)

大家好&#xff0c;我是若川&#xff0c;诚邀你加群长期交流。今天分享一篇用得上的 node 库。下篇。链接地址&#xff1a;https://github.com/huaize2020/awesome-nodejs。上篇是&#xff1a;2021 年最值得了解的 Node.js 工具❝前言&#xff1a;前端时间分享了这些node开源工…

【阿里内部应用】基于Blink为新商业调控打造实时大数据交互查询服务

基于Blink为新商业调控打造实时大数据交互查询服务 案例与解决方案汇总页&#xff1a;阿里云实时计算产品案例&解决方案汇总从IT到DT、从电商到新商业&#xff0c;阿里巴巴的每个细胞都存在大数据的DNA&#xff0c;如何挖掘大数据的价值成为抢占未来先机的金钥匙&#xff0…

Vite 的好与坏

大家好&#xff0c;我是若川&#xff0c;诚邀你进群交流学习。今天分享一篇关于Vite的文章。学习源码系列、面试、年度总结、JS基础系列。全文 3000 字&#xff0c;欢迎点赞关注转发一、Vite 是什么2020年4月&#xff0c;尤大大发了这么一个推&#xff1a;随后&#xff0c;2021…

Windows phone 7新开发工具发布

春节假期已经接近尾声. 马上第一个工作日就要来临. 春节真的不再是一个简简单单的节日. 有时让人感到欣喜 这意味这一年的忙碌都会因为这个节日的到来而画上一个终止符.面临一个不长也不短的假期.眼下的一年翻过去 新的一年即将到来. 似乎一切都可以重新开始. 有时又令人感到无…

opentaps mysql_opentaps 1.4 联接 mysql 笔记

opentaps 1.4 连接 mysql 笔记一、安装 MySQ 略...二、创建MySQL Database opentaps ERP CRM1.mysql -u root -h 127.0.0.1 -p 2.mysql>create database opentaps default CHARACTER SET utf8 COLLATE utf8_general_ci;3.mysql>create user opentaps;4.mysql>grant …

React 核心开发者 Dan Abramov 访谈实录

大家好&#xff0c;我是若川。面试、学习源码系列、年度总结、JS基础系列译者注&#xff1a;本译文是在「在线对话 React.js 核心开发者」一个半小时直播的基础上进行的原文翻译&#xff0c;包括了直播中的所有问答内容&#xff0c;尽可能保留了 Dan 回答的中心语义&#xff0c…

python ev3图形化编程软件下载_mPython(图形化编程软件)

mPython是盛思技术团队在BBC官方原版PythonEditor基础上、拓展开发的应用软件。可以进行可视化代码编程&#xff0c;有hex、python、blockly三种代码读写等功能。功能介绍1、不依赖网络&#xff0c;可离线安装使用2、支持hex、python、blockly三种代码的读写3、blockly模式下支…

python如何安装panda数据库_在Pycharm中安装Pandas库方法(简单易懂)

开发环境的搭建是一件入门比较头疼的事情&#xff0c;在上期的文稿基础上&#xff0c;增加一项Anaconda的安装介绍。Anaconda是Python的一个发行版本&#xff0c;安装好了Anaconda就相当于安装好了Python&#xff0c;并且里面还集成了很多Python科学计算的第三方库。比如我们需…

译文 | Vue 在哪些方面做的比 React 更好?

大家好&#xff0c;我是若川。在过去的五年中&#xff0c;我一直是一名 React 工程师。我爱React。我喜欢开发 React 应用程序。我认为它是目前最好的UI框架之一。但是&#xff0c;在这个领域有一些竞争对手。其中最大的是 Vue.js 。我以前玩过一些 Vue.js&#xff0c;但我认为…