【深入理解ES6】块级作用域绑定

news2025/1/19 23:15:50

1. var声明及变量提升机制

提升(Hoisting)机制:通过关键字var声明的变量,都会被当成在当前作用域顶部生命的变量。

function getValue(condition){
	if(condition){
		var value = "blue";
		console.log(value);
	}else{
		// 此处可访问变量value,其值为undefined
		return null
	}
	// 此处可访问变量value,其值为undefined
}

JavaScript引擎会将上面的getValue函数修改为下面这样。变量value的声明被提升至函数顶部,初始化操作依旧保留在原处执行。为此,ES6引入了块级作用域来强化对变量声明周期的控制。

function getValue(condition){
	var value;
	if(condition){
		value = "blue";
		console.log(value);
	}else{
		return null
	}
}

 

2. 块级声明

块级声明用于声明在指定块的作用域之外无法访问的变量。

块级作用域存在于:

  • 函数内部
  • 块中(‘{}’之间的区域)。

2.1. let声明

  • 用法同var相同,但声明不会被提升;
  • 禁止在同一作用域内重声明;
  • 如果当前作用域内嵌另一个作用域,便可在内嵌的作用域中用let声明同名变量。
function getValue(condition){
	if(condition){
		var value = "blue";
		console.log(value);
	}else{
		// 变量value在此处不存在
		return null
	}
	// 变量value在此处不存在
}
/**禁止重声明*/

var count = 30;
// 抛出语法错误
let count = 40;

if(condition){
	// 不会抛出错误
	let count = 40;
}

2.2. const声明

  • 声明的是常量,必须初始化;
  • 禁止在同一作用域内重声明;
  • 不可再赋值(常量对象可修改值;
  • const声明对象时,不允许修改绑定,但可修改值。
// 有效的常量
const maxItems = 30;
// 语法错误,未初始化
const name;


if(condition){
	const cnt = 40;
}
// 在此处无法访问cnt


let age = 20;
// 抛出错误,重声明
const age = 15;



const pos = 30;
// 抛出语法错误,不能重新赋值
pos = 35;



const person = {
	name: 'Nicholas'
};
// 可以直接修改对象属性的值
person.name = 'Fleur';
// 直接给person赋值,即要改变person的绑定,会抛出语法错误。
person = {
	name: 'DpprZ'
}

 

3. 临时死区(Temppral Dead Zone, TDZ) 

由于 console.log(typeof value) 语句会抛出错误,因此用 let 定义并初始化变量 value 的语句不会执行。此时的 value 还位于 JavaScript 社区所谓的“临时死区”。TDZ 通常用来描述 let 和 const 的不提升效果。

if(condition){
	console.log(typeof value);  // 引用错误
	let value = 40;
}
console.log(typeof value);  // "undefined"
if(condition){
	let value = 40;
}

 JS引擎扫描代码发现变量声明时:

  • var声明:将他们提升至作用域顶部。
  • let和const声明:将声明放在TDZ中。访问TDZ中的变量会触发运行时错误。只有执行过变睾声明语句后,变量才会从TDZ中移除,然后方可正常访问。

 

4. 循环中的块级作用域绑定

for循环中通过let将计数器变量限制在循环内部。

for(var i = 0; i < 10; i++){
	// 更多代码
}
// 在这里仍然可以访问变量i
console.log(i); // 10

for(let i = 0; i < 10; i++){
	// 更多代码
}
// i在这里不可访问,抛出错误
console.log(i); 

 

5. 循环中的函数、let声明、const声明

let funcs = [];
for(var i = 0; i < 10; i++){
    funcs.push(function(){
        console.log(i)
    })
}
/*
每个funcs[]中都存在一个函数:
	ƒ (){ console.log(i) }
*/
funcs.forEach(function(func){
    func(); // 10个10
})

因为这里的循环里的每次迭代同时共享着变量i,循环内部创建的函数都保留了对相同变量的引用。
解决该问题的两种方案:

在循环中使用立即调用函数表达式(IIFE),以强制生成计数器变量的副本。

let funcs = [];

for(var i = 0; i < 10; i++){
    funcs.push(function(value){
        return function(){
        	console.log(value)
        }
    })
}

funcs.forEach(function(func){
    func(); // 0 1 2 3......9
})

用let声明计数器:每次迭代循环都会创建一个新变量 i,并以之前迭代同名变量的值将其初始化。所以循环内部创建的每一个函数都能够得到属于自己的 i 的值。let 声明在循环内部的行为是标准中专门定义的,它不一定与let的不提升特性相关,理解这一点至关重要!

let funcs = [];

for(let i = 0; i < 10; i++){
    funcs.push(function(){
        console.log(i)
    })
}

funcs.forEach(function(func){
    func(); // 0 1 2 3...... 9
})
  •  let声明:声明计数器、for-in、for-of
  • const声明:生命循环内不改变的值、for-in、for-of

 

6. 全局块作用域绑定

var、let、const在全局作用域中的行为区别:

var会创建一个新的变量作为全局对象(浏览器环境中的window对象),会无意中覆盖已存在的全局属性。

let、const会在全局作用域下创建一个新的绑定,但该绑定不会添加为全局对象的属性。换句话说,不能覆盖只是遮蔽。 

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

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

相关文章

7-2 成绩转换

分数 15 全屏浏览题目 切换布局 作者 沈睿 单位 浙江大学 本题要求编写程序将一个百分制成绩转换为五分制成绩。转换规则&#xff1a; 大于等于90分为A&#xff1b;小于90且大于等于80为B&#xff1b;小于80且大于等于70为C&#xff1b;小于70且大于等于60为D&#xff1b;小…

RK3568 ubuntu18.04环境搭建

一.打开Window10虚拟化功能 打开Windows 10控制面板&#xff0c;选择“应用“ 点击右上角“程序与功能” 点击“启用或关闭Windows 功能”&#xff0c;勾选“适用于Linux 的Windows 子系统”和“虚 拟机平台” 二.VMware新建虚拟机 打开Vmware,选择“创建新的虚拟机” 选择“…

tk-mybatis使用介绍,springboot整合tk-mybatis、PageHelper实现分页查询

Mybatis-Plus极大简化了我们的开发&#xff0c;作为mybatis的增强版&#xff0c;Mybatis-Plus确实帮我们减少了很多SQL语句的编写&#xff0c;通过其提高的API&#xff0c;可以方便快捷第完成增删查改操作。但是&#xff0c;其实除了Mybatis-Plus以外&#xff0c;还有一个技术t…

TikTok带货有什么优势?品牌营销的新趋势

在当今数字化时代&#xff0c;品牌营销正日益倾向于社交媒体平台&#xff0c;而TikTok作为一款全球热门的短视频社交平台&#xff0c;正在成为品牌营销的新趋势。TikTok带货&#xff0c;也就是品牌利用TikTok平台进行商品推广和销售&#xff0c;已成为一种创新的、高效的营销方…

BaseMapper的insert方法快速插入数据未提交问题

一、前言 今天测试一批日志数据插入数据库&#xff0c;发现通过BaseMapper的int insert(T entity);方法在大量数据进行插入的时候插入的数据变成了未提交。意思就是程序运行insert成功&#xff0c;但是数据库里却没有数据。当一条一条数据插入的时候却是可以的&#xff0c;循环…

Linux下设计简易线程池

Linux下设计简易线程池 文章目录 Linux下设计简易线程池1.介绍2.具体实现2.1任务类头文件Task.hpp2.2线程池文件ThreadPool.hpp2.3主函数Main.cc 1.介绍 ​ 线程池是一种池化技术&#xff0c;是消费者生产者模型的具体体现。它能够预先创建一批能够被重复使用的线程&#xff0…

Java是编译型还是解释型

定义 编译语言&#xff08;英语&#xff1a;Compiled language&#xff09;是一种程式语言类型&#xff0c;通过编译器来实作。它不像直译语言一样&#xff0c;由直译器将程式码一句一句执行&#xff0c;而是以编译器&#xff0c;先将程式码编译为机器码&#xff0c;再加以执行…

麦肯锡发布《2023年度科技报告》!

在经历了 2022 年技术投资和人才的动荡之后&#xff0c;2023 年上半年&#xff0c;人们对技术促进商业和社会进步的潜力重新燃起了热情。生成式人工智能&#xff08;Generative AI&#xff09;在这一复兴过程中功不可没&#xff0c;但它只是众多进步中的一个&#xff0c;可以推…

世纪之争:量子物理学解决了「黑洞悖论」

在黑洞内部&#xff0c;20 世纪物理学的两大理论支柱似乎发生了冲突。现在&#xff0c;一群年轻的物理学家认为&#xff0c;他们通过诉诸新世纪的中心支柱——量子信息物理学&#xff0c;已经解决了这一冲突。 2013 年 8 月&#xff0c;数十位著名理论物理学家齐聚加利福尼亚州…

Cpp学习——string模拟实现

目录 一&#xff0c;string的成员变量 二&#xff0c;string的各项功能函数 1.构造函数 2.析构函数 3.扩容函数 4.插入与删除数据的函数 5.运算符重载 6.打印显示函数 7&#xff0c;拷贝构造 8.find函数 一&#xff0c;string的成员变量 在模拟实现string之前&#xff…

怎么把视频转gif图片?视频在线转gif动图的方法

我们在使用gif动图的时候&#xff0c;经常发现有些图片是一些视频片段&#xff0c;那么视频转gif图是怎么制作的呢&#xff1f;可以使用视频转gif工具&#xff0c;市面上许多软件都可以完成&#xff0c;今天就给大家介绍一个视频在线转gif的方法&#xff0c;省去了下载安装的时…

LangChain手记 Question Answer 问答系统

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Question Answer&#xff08;源代码可见&#xff09; 本节介绍使用LangChian构建文档上的问答系统&#xff0c;可以实现给定一个PDF文档&#xff0c;询问关于文档上出现过的某个信息点&#xff0c;LLM可以给出关于该…

redis事务对比Lua脚本区别是什么

redis官方对于lua脚本的解释&#xff1a;Redis使用同一个Lua解释器来执行所有命令&#xff0c;同时&#xff0c;Redis保证以一种原子性的方式来执行脚本&#xff1a;当lua脚本在执行的时候&#xff0c;不会有其他脚本和命令同时执行&#xff0c;这种语义类似于 MULTI/EXEC。从别…

SABO-ELM电力负荷短期预测,MATLAB代码

关于电力负荷预测&#xff0c;后台留言的呼声很高。今天就为大家带来一期关于电力负荷预测的文章。 简介 简单说一下本期内容&#xff1a; ①对电力负荷数据进行处理 ②采用极限学习机(ELM)对电力负荷数据进行训练和预测 ③采用减法平均优化器算法优化极限学习机的权值阈值&…

【Linux命令详解 | du命令】 du命令用于查看文件或目录的磁盘使用情况,帮助管理存储空间。

文章标题 简介一&#xff0c;参数列表二&#xff0c;使用介绍1. 基本用法2. 以人类可读的格式显示大小3. 显示总计磁盘使用量4. 包括每个文件的大小5. 限制显示的目录深度6. 排除特定文件或目录7. 指定块大小总结 简介 在Linux操作系统中&#xff0c;存储空间管理是至关重要的…

docker打包运行中的容器,生成镜像文件保存到本地

因为想着方便部署&#xff0c;将所有没问题的项目容器打包成镜像&#xff0c;走到哪儿都离线安装自动部署。 第一步先把运行中的容器打包成镜像 docker commit 运行中容器id 像打包成的镜像名称第二步将大象装进冰箱&#xff0c;不好意思说错了&#xff0c;把镜像保存到本地 …

spring框架核心技术讲解--超详细教程加案例分析

目录 一.spring简介 1.1 含义&#xff1a; 1.2 优点 1.3 官方网站&#xff1a;Spring | Why Springhttps://spring.io/why-spring 二.spring 控制反转IOC&#xff08;依赖注入&#xff09;的特点 2.1 控制反转是什么 2.2 案例&#xff08;讲解控制反转&#xff09; 三.sprin…

35_windows环境debug Nginx 源码-CLion配置CMake和启动

文章目录 生成 CMakeLists.txt 组态档35_windows环境debug Nginx 源码-CLion配置CMake和启动生成 CMakeLists.txt 组态档 修改auto目录configure文件,在 . auto/make 上边增加 . auto/cmake, 大概在 106 行。在 auto 目录下创建cmake 文件其内容如下: #!/usr/bin/env bash NG…

BLIP-Diffusion

论文大意 BLIP2 结合 Stable Diffusion&#xff0c;实现 主题驱动的图像生成与编辑。 分为两个阶段&#xff1a; 1.BLIP2 的multimodal encoder 输出与 text对齐的 visual representation&#xff1b; 2.上述生成的 特征 与 text embedding 共同引导 Stable Diffusion 的生…

Object 类的常见方法

文章目录 一、对象创建和销毁方法&#xff1a;二、对象信息获取方法&#xff1a;三、对象比较方法&#xff1a;四、线程相关方法&#xff1a;五、锁相关方法&#xff1a;六、使用案例&#xff1a;1、对象创建和销毁方法&#xff1a;2、对象信息获取方法&#xff1a;3、对象比较…