当前位置： 首页 > news >正文

ES6 块级作用域

news 2026/5/16 3:55:51

ES6之前没有块级作用域，ES5的var没有块级作用域的概念，只有function有作用域的概念，ES6的let、const引入了块级作用域。

​ ES5之前if和for都没有作用域，所以很多时候需要使用function的作用域，比如闭包。

1.1.1 什么是变量作用域

​ 变量在什么范围内可用，类似Java的全局变量和局部变量的概念，全局变量，全局都可用，局部变量只在范围内可用。ES5之前的var是没有块级作用域的概念，使用var声明的变量就是全局的。

{var name = 'zzz';console.log(name);
}
console.log(name);

​ 上述代码中{}外的console.log(name)可以获取到name值并打印出来，用var声明赋值的变量是全局变量，没有块级作用域。

1.1.2 没有块级作用域造成的问题

if块级

var func;
if(true){var name = 'zzz';func = function (){console.log(name);}func();
}
name = 'ttt';
func();
console.log(name);

​ 代码输出结果为'zzz','ttt','ttt'，第一次调用func()，此时name=‘zzz’，在if块外将name置成‘ttt’，此时生效了，if没有块级作用域。

for块级

​ 定义五个按钮，增加事件，点击哪个按钮打印“第哪个按钮被点击了”。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>块级作用域</title>
</head>
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">    </script><script>// 3.没有块级作用域引起的问题:for块级var btns = document.getElementsByTagName("button");for (var i = 0; i < btns.length; i++) {btns[i].addEventListener('click',function (param) {console.log("第"+i+"个按钮被点击了");});}</script>
</body>
</html>

​ for块级中使用var声明变量i时，是全局变量，点击任意按钮结果都是“第五个按钮被点击了”。说明在执行btns[i].addEventListener('click',function())时，for块级循环已经走完，此时i=5，所有添加的事件的i都是5。

​ 改造上述代码，将for循环改造，由于函数有作用域，使用闭包能解决上述问题。

      // 使用闭包,函数有作用域for (var i = 0; i < btns.length; i++) {(function (i) {btns[i].addEventListener('click',function (param) {console.log("第"+i+"个按钮被点击了");})})(i);}

​ 结果如图所示，借用函数的作用域解决块级作用域的问题，因为有块级作用域，每次添加的i都是当前i。

 

​ 在ES6中使用let/const解决块级作用域问题，let和const有块级作用域，const定义常量，在for块级中使用let解决块级作用域问题。

 

      // ES6使用let/constconst btns = document.getElementsByTagName("button");for (let i = 0; i < btns.length; i++) {btns[i].addEventListener('click',function (param) {console.log("第"+i+"个按钮被点击了");})}

​ 结果和使用闭包解决一致。

相关文章：

ES6 块级作用域

ES6之前没有块级作用域&#xff0c;ES5的var没有块级作用域的概念&#xff0c;只有function有作用域的概念&#xff0c;ES6的let、const引入了块级作用域。 ​ ES5之前if和for都没有作用域&#xff0c;所以很多时候需要使用function的作用域&#xff0c;比如闭包。 1.1.1 什么…...

编程日记 2023/4/25 4:59:04

ShardingSphere-JDBC垂直分片

什么是数据分片&#xff1f; 简单来说&#xff0c;就是指通过某种特定的条件&#xff0c;将我们存放在同一个数据库中的数据分散存放到多个数据库&#xff08;主机&#xff09;上面&#xff0c;以达到分散单台设备负载的效果。 数据的切分&#xff08;Sharding&#xff09;根据…...

编程日记 2023/5/30 19:11:18

Node 04-http模块

HTTP 协议 概念 HTTP&#xff08;hypertext transport protocol&#xff09;协议&#xff1b;中文叫 超文本传输协议 是一种基于TCP/IP的应用层通信协议 这个协议详细规定了 浏览器 和 万维网 服务器 之间互相通信的规则 协议中主要规定了两个方面的内容: 客户端&#xff1…...

编程日记 2023/5/31 11:09:22

记录项目过程中的编译错误及解决方法（持续更新中）

文章目录 前言 前言 记录做项目的时候编译问题&#xff0c;好记性不如烂笔头&#xff0c;下次碰到相同的问题也可以方便查阅 2023.3.22 问题1&#xff1a;每次跑回归测试的时候&#xff0c;总是会出现错误&#xff0c;总共只有5个test&#xff0c;单独跑这个case的时候是没有…...

编程日记 2023/4/25 4:44:00

Android Hilt依赖注入框架

Hilt 是一个基于 Dagger2 的依赖注入框架&#xff0c;它提供了一些简便的注入方式来简化开发者在 Android 应用中使用 Dagger2 的复杂性。Hilt 旨在简化 Android 应用程序中的依赖注入实现&#xff0c;使开发人员能够更轻松地管理依赖项和应用程序的组件。 Hilt 的主要目标是提…...

编程日记 2023/4/25 4:38:59

LeetCode：59. 螺旋矩阵 II

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; &#x1f33b;算法&#xff0c;不如说它是一种思考方式&#x1f340; 算法专栏&#xff1a; &#x1f449;&#x1f3fb;123 一、&#x1f331;59. 螺旋矩阵 II 题目描述&#xff1a;给你一个正整数 n &#xff0c…...

编程日记 2023/4/25 4:33:57

信息安全复习六：公开密钥密码学

一、章节梗概 1.公开密钥密码模型的基本原理 2.两个算法&#xff1a;RSA&D-H算法 主要内容 1.对称密钥密码的密钥交换问题 2.公钥密码模型的提出 3.设计公钥密码的基本要求 4.数字签名 5.RSA算法 6.公钥密码的特征总结 二、对称密钥密码 对称加密算法中&#xff0c;数据…...

编程日记 2023/4/25 4:28:54

YOLOv8 更换主干网络之 ShuffleNetv2

《ShuffleNet V2: Practical Guidelines for Efficient CNN Architecture Design》 目前，神经网络架构设计多以计算复杂度的间接度量——FLOPs为指导。然而，直接的度量，如速度，也取决于其他因素，如内存访问成本和平台特性。因此，这项工作建议评估目标平台上的直接度量，而…...

编程日记 2023/4/25 4:23:52

async/await最详细的讲解

一、async 和 await 在干什么 async 是“异步”的简写&#xff0c;而 await 的意思是等待。async 用于申明一个 function 是异步的&#xff0c;而 await 等待某个操作完成。 async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。 async/await 像 p…...

编程日记 2023/4/25 4:18:51

学习数据结构第6天(栈的基本概念)

栈的基本概念 栈的定义栈的基本操作栈的存储结构 栈的定义 栈(Stack)是一种基于先进后出(FILO)或者后进先出(LIFO)的数据结构&#xff0c;是一种只允许在一端进行插入和删除操作的特殊线性表。 栈按照先进后出的原则存储数据&#xff0c;先进入的数据被压入栈底&#xff0c;最…...

编程日记 2023/4/25 4:13:50

自动化添加时间戳版本号

自动化添加时间戳版本号 前言一、静态资源二、版本号的来源三. 版本信息的位置四. 添加时间戳版本号1. 手动添加2. 自动化生成 前言 软件开发和发布过程中&#xff0c;版本是个极其重要的因素。大至操作系统&#xff0c;小到功能组件&#xff0c;都会涉及到版本相关的问题。 …...

编程日记 2023/4/25 4:08:49

【C语言】指针进阶[上] (字符、数组指针、指针数组、数组传参和指针传参）

简单不先于复杂&#xff0c;而是在复杂之后。 目录 1. 字符指针 面试题 2. 指针数组 3. 数组指针 3.1 数组指针的定义 3.2 &数组名 VS 数组名 3.3 数组指针的使用 4. 数组参数、指针参数 4.1 一维数组传参 4.2 二维数组传参 4.3 一级指针传参 4.4 二…...

编程日记 2023/4/25 4:03:48

软件测试外包干了4年，感觉废了..

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...

编程日记 2023/4/25 3:58:47

ai改写句子软件-ai改写

AI免费伪原创&#xff1a;助力网站内容升级 您是否曾经为网站优化而烦恼&#xff0c;无论是内容更新还是SEO优化&#xff0c;都需要大量的时间和精力。但是&#xff0c;您是否知道&#xff0c;现在有一款能够使用AI技术来帮助您完成这些任务&#xff0c;而且还是免费的呢&…...

编程日记 2023/4/25 3:53:46

zabbix监控linux主机

1.本实验使用centos7主机&#xff0c;IP地址为10.1.60.115&#xff0c;firewalld和selinux服务已关闭 2.下载zabbix yum源(与zabbix server用一样的版本) rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm 3.安装zabbix客户…...

编程日记 2023/4/25 3:48:45

编程中泛型的使用规则和限制是什么？

泛型是一种程序设计风格&#xff0c;它允许程序员在编写代码时使用一些以后才指定的类型&#xff0c;在实例化时作为参数指明这些类型。泛型主要用于实现通用的数据结构&#xff0c;例如集合、映射、列表等&#xff0c;使得这些数据结构可以存储多种类型的元素。 在泛型使用之…...

编程日记 2023/4/25 3:43:44

【工具】使用VS Code调试Docker Container中的代码

目录 使用VS Code调试Docker Container中的Autoware.ai代码第一种方法 -- 在VS Code中进行DebugStep1Step2Step3Step4c_cpp_properties.jsonlaunch.jsonsettings.jsontask.json Step5Step6Step7参考链接 第二种方法 -- cmake重新编译cmake使用方法&#xff08;简介&#xff09;…...

编程日记 2023/4/25 3:38:43

ZVL3网络分析仪

ZVL3 Rohde&Schwarz ZVL3 3G矢量网络分析仪|罗德与施瓦茨 9KHz至3GHz 罗德与施瓦茨Rohde&Schwarz 性能特点&#xff1a; 频率范围 9kHz至3GHz/6 GHz(典型值为5kHz) 测量时间(201个测量点&#xff0c;以校准的双端口) <75ms 数据传输(201个测量点) 在100Mbit/sLAN…...

编程日记 2023/4/25 3:33:42

TCP协议

传输层&#xff08;协议&#xff09; TCP协议 三次握手协议保证连接建立 四次挥手&#xff0c;利用这个协议断开连接&#xff0c;而且保证连接通道里面数据已经处理完毕 客户端&#xff08;Socket&#xff09;: 1、创建客户端的Socket对象&#xff08;Socket&#xff09;与指…...

编程日记 2023/5/30 5:39:01

69. x 的平方根

给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x, 0.5) 或者 x ** 0.5 。 示例 1&#xff1…...

编程日记 2023/4/25 3:23:40

Simics在网络转型与SDN迁移中的核心价值与应用

1. Simics在网络转型与SDN迁移中的核心价值解析网络架构正经历从传统硬件设备向软件定义网络(SDN)和网络功能虚拟化(NFV)的深刻变革。这场变革的核心挑战在于&#xff1a;如何在保持网络高性能的同时&#xff0c;实现控制平面与数据平面的解耦&#xff0c;以及如何将传统网络功…...

编程新知 2026/5/16 3:54:09

ARM EDPRSR寄存器解析与嵌入式调试实践

1. ARM EDPRSR寄存器深度解析在嵌入式系统开发中&#xff0c;调试功能的重要性不言而喻。作为ARM架构调试系统的核心组件之一&#xff0c;EDPRSR&#xff08;External Debug Processor Status Register&#xff09;寄存器为开发者提供了处理器状态监控的关键窗口。这个32位寄存…...

编程新知 2026/5/16 2:50:44

如何用BilibiliDown轻松下载B站视频：终极跨平台免费开源工具完整指南

如何用BilibiliDown轻松下载B站视频&#xff1a;终极跨平台免费开源工具完整指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.co…...

编程新知 2026/5/16 1:56:36

全栈代码资源聚合库：开发者如何高效利用开源代码示例提升工程能力

1. 项目概述&#xff1a;一个面向开发者的全栈代码资源聚合库最近在GitHub上看到一个挺有意思的项目&#xff0c;叫wuwangzhang1216/claude-code-source-all-in-one。光看这个名字&#xff0c;你大概能猜到这是个什么——没错&#xff0c;这是一个围绕“代码”和“源代码”做文…...

编程新知 2026/5/16 0:45:48

学妹问降完AI重复率反涨10个点怎么办？这款降AI工具同时降AI率重复率

学妹问降完AI重复率反涨10个点怎么办&#xff1f;这款降AI工具同时降AI率重复率 学妹凌晨发来的紧急求助 3 月 24 号凌晨 1:17 学妹发来消息&#xff1a;「学姐我刚送知网测——AI 率从 65% 降到 9% 过了&#xff01;但重复率从 18% 涨到 28% 不达标了&#xff01;这怎么办」…...

编程新知 2026/5/16 0:43:24

BilibiliDown终极指南：3步轻松下载B站高清视频与音频

BilibiliDown终极指南&#xff1a;3步轻松下载B站高清视频与音频 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi…...

编程新知 2026/5/15 22:14:34

堕落千金—黑蔷薇与欲望之火 2026最新版免费下载 （看到请立即转存 资源随时失效）pc手机通用

下载链接 Build.6769958|整合DLC|容量1.1GB|官方简体中文|支持键盘.鼠标 在互动叙事与成人向角色扮演游戏&#xff08;RPG&#xff09;的市场中&#xff0c;《堕落千金—黑蔷薇与欲望之火》&#xff08;以下简称《黑蔷薇》&#xff09;自发布以来便凭借其精致的美术风格与沉浸…...

编程新知 2026/5/15 21:16:03

不使用void HAL_TIM_Encoder_MspInit(TIM_HandleTypeDef* tim_encoderHandle)增强代码的层级结构注意事项

这是正常用cube Max生成的代码&#xff0c;这里以设置编码器为例。 GPIO初始化函数放在HAL_TIM_Encoder_MspInit这个回调函数中。代码正常运行/* TIM3 init function */ void MX_TIM3_Init(void) {TIM_Encoder_InitTypeDef sConfig {0};TIM_MasterConfigTypeDef sMasterConfig…...

编程新知 2026/5/15 18:56:44

如何快速集成Miniblink49：轻量级浏览器内核的终极指南

如何快速集成Miniblink49&#xff1a;轻量级浏览器内核的终极指南 【免费下载链接】miniblink49 a lighter, faster browser kernel of blink to integrate HTML UI in your app. 一个小巧、轻量的浏览器内核&#xff0c;用来取代wke和libcef 项目地址: https://gitcode.com/…...

编程新知 2026/5/15 18:04:39

高效构建面试题库系统：React+Node全栈技术实战指南

高效构建面试题库系统&#xff1a;ReactNode全栈技术实战指南 【免费下载链接】mianshiya-public 持续维护的企业面试题库网站&#xff0c;帮你拿到满意 offer&#xff01;⭐️ 2026年最新Java面试题、前端面试题、AI大模型面试题、AI Agent面试题、RAG面试题、C面试题、Go面试…...

编程新知 2026/5/15 17:47:31