【javascript】闭包

通过定时器从第一个元素开始往后,每隔一秒输出arr数组中的一个元素。

<script>
    var arr = ['one', 'two', 'three'];
    for(var i = 0; i < arr.length; i++) {
    setTimeout(function () {
        console.log(arr[i]);
    }, i * 1000);
    }
</script>

 但是运行过后,我们却会发现结果是每隔一秒输出一个“undefined”。

这是为什么呢?

setTimeout()函数与for循环在调用时会产生两个独立执行上下文环境,当setTimeout()函数内部的函数执行时,for循环已经执行结束,而for循环结束的条件是最后一次i++执行完毕,此时i的值为3,所以实际上setTimeout()函数每次执行时,都会输出arr[3]的值。而因为arr数组最大索引值为2,所以会间隔一秒输出“undefined”。

尝试如下代码,发现就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var arr = ['one', 'two', 'three'];
        for(var i = 0; i < arr.length; i++) {
        (function (time) {
            setTimeout(function () {
                console.log(arr[time]);
            }, time * 1000);
        })(i);
        }
     </script>
  </head>
  <body>
  </body>
  </html>

 对比两个代码的区别,有什么不同呢?

先谈谈什么是执行上下文环境

JavaScript每段代码的执行都会存在于一个执行上下文环境中,而任何一个执行上下文环境都会存在于整体的执行上下文环境中。根据栈先进后出的特点,全局环境产生的执行上下文环境会最先压入栈中,存在于栈底。当新的函数进行调用时,会产生的新的执行上下文环境,也会压入栈中。当函数调用完成后,这个上下文环境及其中的数据都会被销毁,并弹出栈,从而进入之前的执行上下文环境中。

第二个代码通过立即执行函数将索引i作为参数传入,在立即函数执行完成后,由于setTimeout()函数中有对arr变量的引用,其执行上下文环境不会被销毁,因此对应的i值都会存在内存中。所以每次执行setTimeout()函数时,i都会是数组对应的索引值0、1、2,从而间隔一秒输出“one”“two”“three”。

下面引出闭包的概念,即函数声明和函数表达式可以位于另一个函数的函数体内,在内部函数中可以访问外部函数声明的变量,当这个内部函数在包含它们的外部函数之外被调用时,就会形成闭包

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【LLMs 入门实战 】第二式:MiniGPT4 模型学习与实战

2023年4月17日&#xff0c;多模态问答模型MiniGPT-4发布&#xff0c;实现了GPT-4里的宣传效果《MiniGPT-4: Enhancing Vision-language Understanding with Advanced Large Language Models》《MiniGPT-4&#xff1a;使用高级大语言模型增强视觉语言理解》 模型介绍模型架构微调…

ECCV2022 多目标跟踪(MOT)汇总

一、《Towards Grand Unification of Object Tracking》 作者: Bin Yan1⋆, Yi Jiang2,†, Peize Sun3, Dong Wang1,†,Zehuan Yuan2, Ping Luo3, and Huchuan Lu School of Information and Communication Engineering, Dalian University of Technology, China 2 ByteDance …

5.6.2 传输层编址--端口

5.6.2 传输层编址 传输层为应用进程提供了端到端的逻辑通信&#xff0c;两个主机之间的通信实际上是两个主机中的应用进程之间的相互通信&#xff0c;因此一个主机中可能有多个应用进程同时和另一个主机中多个应用进程进行通信&#xff0c;而网络层我们学习的网际协议能够保证…

动态规划:积木画

积木画 问题描述 小明最近迷上了积木画, 有这么两种类型的积木, 分别为 I I I 型&#xff08;大小为 2 个单位面积) 和 L L L 型 (大小为 3 个单位面积): 同时, 小明有一块面积大小为 2 N 2 \times N 2N 的画布, 画布由 2 N 2 \times N 2N 个 1 1 1 \times 1 11 区域…

【强化学习】——Q-learning算法为例入门Pytorch强化学习

&#x1f935;‍♂️ 个人主页&#xff1a;Lingxw_w的个人主页 ✍&#x1f3fb;作者简介&#xff1a;计算机研究生在读&#xff0c;研究方向复杂网络和数据挖掘&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;CSDN专家博主、人工智能领域优质创作者&#xf…

【30天熟悉Go语言】8 Go流程控制之循环结构for range、goto、break、continue

文章目录 一、前言二、for循环1、语法1&#xff09;和Java的for循环一样2&#xff09;和Java的while一样3&#xff09;和Java的for(;;)一样 2、for语句执行过程 三、for range1、语法1&#xff09;遍历key、value只遍历value 2&#xff09;遍历key 四、关键字1、break1&#xf…

【Java】如何优雅的关闭线程池

文章目录 背景一、线程中断 interrupt二、线程池的关闭 shutdown 方法2.1、第一步&#xff1a;advanceRunState(SHUTDOWN) 把线程池置为 SHUTDOWN2.2、第二步&#xff1a;interruptIdleWorkers() 把空闲的工作线程置为中断2.3、 第三步&#xff1a;onShutdown() 一个空实现&…

Java POI (1)—— 数据读写操作快速入门

一、Excel的版本区别&#xff08;03版和07版&#xff09; 所谓“03版” 和 “07版”&#xff0c;指的是 Microsoft Excel 版本号。这些版本号代表着不同的Excel 文件格式。2003版 Excel 使用的文件格式为 .xls&#xff0c;而2007版开始使用新的文件格式 .xlsx。 . xlsx 文件格式…

【Spring 】项目创建和使用

哈喽&#xff0c;哈喽&#xff0c;大家好~ 我是你们的老朋友&#xff1a;保护小周ღ 谈起Java 圈子里的框架&#xff0c;最年长最耀眼的莫过于 Spring 框架啦&#xff0c;如今已成为最流行、最广泛使用的Java开发框架之一。不知道大家有没有在使用 Spring 框架的时候思考过这…

VulnHub靶机渗透:SKYTOWER: 1

SKYTOWER: 1 靶机环境介绍nmap扫描端口扫描服务扫描漏洞扫描总结 80端口目录爆破 3128端口获取立足点获取立足点2提权总结 靶机环境介绍 https://www.vulnhub.com/entry/skytower-1,96/ 靶机IP&#xff1a;192.168.56.101 kali IP&#xff1a;192.168.56.102 nmap扫描 端口扫…

使用mpi并行技术实现wordcount算法

【问题描述】 编写程序统计一个英文文本文件中每个单词的出现次数&#xff08;词频统计&#xff09;&#xff0c;并将统计结果按单词字典序输出到屏幕上。 注&#xff1a;在此单词为仅由字母组成的字符序列。包含大写字母的单词应将大写字母转换为小写字母后统计。 【输入形…

ChatGPT使用的SSE技术是什么?

在现代web应用程序中&#xff0c;实时通信变得越来越重要。HTTP协议的传统请求/响应模式总是需要定期进行轮询以获得最新的数据&#xff0c;这种方式效率低下并且浪费资源。因此&#xff0c;出现了一些新的通信技术&#xff0c;如WebSocket和SSE。但是&#xff0c;GPT为什么选择…

分布式数据库架构

分布式数据库架构 1、MySQL常见架构设计 对于mysql架构&#xff0c;一定会使用到读写分离&#xff0c;在此基础上有五种常见架构设计&#xff1a;一主一从或多从、主主复制、级联复制、主主与级联复制结合。 1.1、主从复制 这种架构设计是使用的最多的。在读写分离的基础上…

JS 介绍 Babel 的使用及 presets plugins 的概念

一、Babel 是什么 Bebal 可以帮助我们将新 JS 语法编译为可执行且兼容旧浏览器版本的一款编译工具。 举个例子&#xff0c;ES6&#xff08;编译前&#xff09;&#xff1a; const fn () > {};ES5&#xff08;编译后&#xff09;&#xff1a; var fn function() {}二、B…

设计模式-抽象工厂模式

抽象工厂模式 1、抽象工厂模式简介2、具体实现 1、抽象工厂模式简介 抽象工厂模式(Abstract Factory Pattern)在工厂模式尚添加了一个创建不同工厂的抽象接口(抽象类或接口实现)&#xff0c;该接口可叫做超级工厂。在使用过程中&#xff0c;我们首先通过抽象接口创建不同的工厂…

【HTML界面设计(二)】说说模块、登录界面

记录很早之前写的前端界面&#xff08;具体时间有点久远&#xff09; 一、说说模板 采用 适配器&#xff08;Adapter&#xff09;原理 来设计这款说说模板&#xff0c;首先看一下完整效果 这是demo样图&#xff0c;需要通过业务需求进行修改的部分 这一部分&#xff0c;就是dem…

Redis系列--布隆过滤器(Bloom Filter)

一、前言 在实际开发中&#xff0c;会遇到很多要判断一个元素是否在某个集合中的业务场景&#xff0c;类似于垃圾邮件的识别&#xff0c;恶意ip地址的访问&#xff0c;缓存穿透等情况。类似于缓存穿透这种情况&#xff0c;有许多的解决方法&#xff0c;如&#xff1a;redis存储…

宏景eHR SQL注入漏洞复现(CNVD-2023-08743)

0x01 产品简介 宏景eHR人力资源管理软件是一款人力资源管理与数字化应用相融合&#xff0c;满足动态化、协同化、流程化、战略化需求的软件。 0x02 漏洞概述 宏景eHR 存在SQL注入漏洞&#xff0c;未经过身份认证的远程攻击者可利用此漏洞执行任意SQL指令&#xff0c;从而窃取数…

如何在大规模服务中迁移缓存

当您启动初始服务时&#xff0c;通常会过度设计以考虑大量流量。但是&#xff0c;当您的服务达到爆炸式增长阶段&#xff0c;或者如果您的服务请求和处理大量流量时&#xff0c;您将需要重新考虑您的架构以适应它。糟糕的系统设计导致难以扩展或无法满足处理大量流量的需求&…

docker基础

文章目录 通过Vagrant安装虚拟机修改虚拟机网络配置 docker CE安装(在linux上)docker desktop安装(在MacOS上)Docker架构关于-阿里云镜像加速服务配置centos卸载docker 官网: http://www.docker.com 仓库: https://hub.docker.com Docker安装在虚拟机上&#xff0c;可以通过V…