【javascript】闭包

news2024/11/19 4:11:35

通过定时器从第一个元素开始往后,每隔一秒输出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”。

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

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

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

相关文章

使用生成 AI 实现准确的新闻摘要

shadow 这篇文章介绍了作者 Alessandro Alviani 的实践经验&#xff0c;非常有参考价值。 指令冗余&#xff0c;多步引导&#xff0c;是目前提高LLM输出质量的方法之一。 Towards Accurate Quote-Aware Summarization of News using Generative AI Alessandro Alviani generati…

电容式电动汽车路径规划问题的双级蚁群优化算法

摘要&#xff1a; 电动汽车&#xff08;EV&#xff09;技术的发展导致了一个新的车辆路由问题&#xff08;VRP&#xff09;&#xff0c;称为有容量的电动汽车路由问题&#xff08;CEVRP&#xff09;。由于充电站的数量有限&#xff0c;电动汽车的巡航范围有限&#xff0c;不仅要…

【从零开始学习JAVA | 第十九篇】初识内部类

前言&#xff1a; 内部类是类的五大成员。一个类的其他的成员分别是属性&#xff0c;方法&#xff0c;构造方法&#xff0c;代码块。本文将详细介绍什么是内部类&#xff0c;以及内部类的意义。 内部类&#xff1a; 内部类&#xff08;Inner Class&#xff09;是 Java 中的一个…

MedViT:一种用于广义医学图像分类的鲁棒Vision Transformer

文章目录 MedViT: A Robust Vision Transformer for Generalized Medical Image Classification摘要本文方法Locally Feed-Forward Network 实验实验结果 MedViT: A Robust Vision Transformer for Generalized Medical Image Classification 摘要 卷积神经网络(cnn)在现有医…

实现一个 AI 驱动的马里奥(使用双重深度 Q 网络),它可以自己玩游戏

训练玩马里奥的 RL 智能体 本教程将向您介绍深度强化学习的基础知识。 最后&#xff0c;您将实现一个 AI 驱动的马里奥&#xff08;使用双重深度 Q 网络&#xff09;&#xff0c;它可以自己玩游戏。 # !pip install gym-super-mario-bros7.3.0import torch from torch import …

STM32实现延时

在STM32单片机中&#xff0c;实现延时一般都是使用定时器&#xff0c;既可以使用Systick定时器&#xff0c;也可以使用常规的定时器。 定时器在设置了定时并开启之后&#xff0c;就会进入自主运行模式&#xff0c;其中&#xff0c;初始化设置这一阶段是由CPU执行相应指令完成的…

Spring Cloud_Spring Cloud Alibaba_00000

contents 微服务介绍版本选择创建项目创建Maven工程 说明 微服务介绍 微服务架构是一种架构模式。它提倡将单一应用程序划分成一组小的服务。服务之间相互协调、相互配合&#xff0c;为用户提供最终价值。每个服务运行在其独立的进程中&#xff0c;服务与服务间采用轻量级的通…

html通过web3JS 获取当前连接的区块链信息和账号信息

前面 我们讲了 MetaMask和ganache的配置安装 并用 MetaMask管理ganache的启动的虚拟区块链 那么 我们现在也完全可以写一个网页来做这个东西的管理 您可以先查看文章web3.js获取导入做一个导入了 web3的html文件 首先我们可以来试着 获取 自己当前是在哪个区块的 getBlockNum…

【深度学习】【分布式训练】DeepSpeed:AllReduce与ZeRO-DP

AllReduce与ZeRO-DP ​ ZeRO-DP是分布式训练工具DeepSpeed的核心功能之一&#xff0c;许多其他的分布式训练工具也会集成该方法。本文从AllReduce开始&#xff0c;随后介绍大模型训练时的主要瓶颈----显存的占用情况。在介绍完成标准数据并行(DP)后&#xff0c;结合前三部分的内…

玩游戏提示d3dx9丢失-找不到d3dx9怎么修复

相信有些朋友遇到了d3dx9丢失的情况不知道怎么解决&#xff0c;而今日小编带来的这篇文章就是讲解关于d3dx9丢失进行修复的操作内容&#xff0c;d3dx9丢失怎么解决&#xff1f;&#xff08;修复方法&#xff09;d3dx9文件是DirectX中必备文件,许多游戏需要此文件运行。 d3dx9丢…

文件系统概述

目录 概述用户空间层面1.应用程序可以直接使用内核提供的系统调用访问文件&#xff1a;2.应用程序也可以使用 glibc 库封装的标准 I/O 流函数访问文件&#xff1a; 硬件层面1.块设备2.闪存3.NVDIMM 内核空间层面 概述 在 Linux 系统中&#xff0c;一切皆文件&#xff0c;除了通…

【MySQL 】:测试数据准备、SQL语句规范与基本操作

前言 欢迎来到小K的MySQL专栏&#xff0c;本节将为大家准备MySQL测试数据、以及带来SQL语句规范、数据库的基本操作的详细讲解~✨文末送书&#xff0c;小K赠书活动第二期 目录 前言一、准备测试数据二、SQL语句规范三、数据库的基本操作四、总结&#xff1a;文末赠书 一、准备测…

直线导轨在焊接领域有什么作用?

焊接技术在现代制造业中的应用越来越广泛&#xff0c;直线导轨作为重要的传动元件&#xff0c;已经成为焊接设备中不可或缺的部分。 相对于直线轴承来说&#xff0c;直线导轨具有较高的负载能力和刚度&#xff0c;能够保证高精度的直线运动&#xff0c;滑动摩擦小&#xff0c;惯…

【Python】异常处理 ③ ( 捕获所有类型的异常 | 默认捕获所有类型异常 | 捕获 Exception 异常 )

文章目录 一、Python 默认捕获所有类型异常1、默认捕获所有类型异常 - 无法获取异常类型2、代码实例 - 默认捕获所有类型异常 二、Python 捕获所有类型异常 - 捕获 Exception 异常1、捕获 Exception 类型异常 - 可获取异常类型2、代码实例 - 捕获 Exception 异常 一、Python 默…

管理类联考——逻辑——知识篇——形式逻辑——三、直言——haimian

直言 考点分析 直言 年度 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023题量786223232 性质定义 直言命题也叫做性质命题&#xff0c;是判断事物是否具有某种性质的命题。直言命题由四部分组成&#xff1a;主项、谓项、联项、量项。 不同种类 对当关系 对…

PID控制算法:2、Derivative Kick(微分冲击)

什么是微分冲击Derivative Kick 引入微分&#xff0c;就是为了减少超调量的&#xff0c;但是根据PID的经典公式 就看微分部分 在PID刚开始时&#xff0c;误差值肯定是存在的&#xff0c;但是PID启动的瞬间&#xff0c;这个dt是很小的&#xff0c;这就导致是一个很大的值&#…

软件开发实习个人总结

软件开发实习个人总结篇1 一、实习目的 随着时代发展和社会进步&#xff0c;用人单位对游戏软件专业大学生的要求越来越高&#xff0c;对于即将毕业的游戏软件专业在校生而言&#xff0c;为了能更好的适应游戏软件专业严峻的就业形势&#xff0c;毕业后能够尽快的融入到社会&am…

Golang学习日志 ━━ 通过将gin-vue-admin项目上传到自己的仓库并且与原版保持更新来学习github操作

gin-vue-admin是一套国人用golang开发的后台管理系统&#xff0c;本文是从作者早期原文中截取的一部分&#xff0c;后期会以本文为框架进行扩展说明。 官网&#xff1a;https://www.gin-vue-admin.com/ 学习视频&#xff1a;https://www.bilibili.com/video/BV1kv4y1g7nT/?p6 …

Redis 2023面试5题(七)

一、Redis redlock 实现原理 Redlock是一种基于Redis的分布式锁实现&#xff0c;它可以解决在分布式系统中由于主从切换、网络延迟等导致的锁竞争问题。 Redlock的实现原理如下&#xff1a; 创建多个Redis实例&#xff0c;每个实例都有相同的锁名称。使用Redis的SETNX命令尝试…

如何选择消息中间件

一、 分布式系统消息通信技术简介 分布式系统消息通信技术主要包括以下几种&#xff1a; 1. RPC(Remote Procedure Call Protocol). 一般是C/S方式&#xff0c;同步的&#xff0c;跨语言跨平台&#xff0c;面向过程 2. CORBA(Common Object Request Broker Architecture). CO…