【前端工程师手册】JavaScript作用域拾遗

【前端工程师手册】JavaScript作用域拾遗

昨天总结了一些作用域的知识【前端工程师手册】JavaScript之作用域,但是发表完发现忘记了一些东西,今天拾个遗。
昨天说到了JavaScript中没有块级作用域,其实在es6中是有的。

es6中的块级作用域

先举个栗子:

var foo = true;
if (foo) {let bar = foo * 2;bar = something( bar ); console.log(bar);}console.log( bar );  // ReferenceError

这个是let最直观的作用,在一对大括号中创建了块级作用域,bar会在大括号中的代码执行完毕后销毁。
再举个栗子:

for(var i = 1;i <= 5;i++) {setTimeout(function() {console.log(i)}, i*1000)
}
// 每隔一秒打印一个6,共打印5次

如果说这段代码的初衷是间隔1秒打印出1、2、3、4、5的话,结果是令人大跌眼镜的,真正的结果是每隔1秒打印一次6,打印5次.
为什么会这样子?首先是因为闭包的原因,闭包后面再说,现在先理解为闭包是一个函数,一个能够访问并未在它自己内部定义的变量的函数。
OK,接下来说深层次原因。for循环完毕之后,i=6,且此时生成了5个匿名函数 function(){ console.log(i) },由于这5个匿名函数处在同一个词法作用域中,所以他们引用同一个i,所以当他们执行时,自然而然就会打出6。
如何解决?

for(let i = 1;i <= 5;i++) {setTimeout(function() {console.log(i)}, i*1000)
}
// 间隔一秒分别打印出1、2、3、4、5

把var换成let声明就可以了。
《你不知道的JavaScript-上卷》中解释道:

for 循环头部的 let 不仅将 i 绑定到了 for 循环的块中,事实上它将其重新绑定到了循环的每一个迭代中,确保使用上一个循环迭代结束时的值重新进行赋值。

说白了就是再每次迭代内部,都会对 i 进行隐形的重新赋值,且使用的是上一个迭代结束时的值来对 i 进行重新赋值。
差不多就是这样的:

for(let i = 1;i <= 5;i++) {let i = 上次迭代结束的isetTimeout(function() {console.log(i)}, i*1000)
}

所以5个匿名函数引用的并不是同一个i,自然就会顺利的间隔一秒分别打印出1、2、3、4、5了

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

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

相关文章

游戏开发中的数据表示

声明&#xff1a;本文内容源自腾讯游戏学院程序公开课_服务端 一、数据表示的基础 什么是数据表示&#xff1f; 数据是信息的载体。 数据表示是一组操作&#xff0c;可以描述、显示、操作信息。 数据表示的要素 IDL - 接口描述语言 IDL是用来描述软件组件接口的一种计算机语言。…

29--反转字符串

文章目录1.问题描述2.代码详情1.问题描述 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 你可以假设数组中…

什么是临界区

临界区[1] 指的是一个访问共用资源&#xff08;例如&#xff1a;共用设备或是共用存储器&#xff09;的程序片段&#xff0c;而这些共用资源又无法同时被多个 线程 访问的特性。当有线程进入临界区段时&#xff0c;其他线程或是 进程 必须等待&#xff08;例如&#xff1a;bo…

BZOJ 2957 楼房重建 (分块)

题解&#xff1a;分块&#xff0c;然后暴力维护每一块上升序列&#xff0c;注意是不是最长上升序列&#xff0c;二分查找第二块中大于第一块的最后一个上升序列中的数。 注意&#xff1a;每一块的大小不要用√n会T掉的&#xff0c;把块的大小设为500-600都可以&#xff08;T了一…

OpenBSD 5.1 正式版发布

OpenBSD 开发团队于近日发布了 5.1 正式版。 OpenBSD是一个从NetBSD衍生出来的类Unix操作系统。项目领导人Theo de Raadt在1995年发起了OpenBSD项目&#xff0c;希望创造一个注重安全的操作系统&#xff0c;此外OpenBSD也以高品质的文件、坚持开放程式码以及严格的软件授权著名…

Spring事务传播行为7种类型 --- 看一遍就能记住!

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、Spring 事务传播行为一共有7种类型&#xff0c;主要分为3类&#xff1a; 1&#xff09;支持当前事物、 2&#xff09;不支持当前事…

PowerShell变量——PowerShell三分钟(七)

有了前面的PowerShell基础&#xff0c;今天我们来学习一个可以极大提升PowerShell效率的用法——变量简答来说呢&#xff0c;变量就是在内存中的一个带有名字的盒子~~~~~你可以把所有想存放的东西都放到这个“盒子”里。然后通过名字去访问这个盒子。在访问过程中&#xff0c;可…

Machine Learning - Coursera week6 Evaluating a learning algorithm

Evaluating a learning algorithm 1. Design what to do next 在预测房价的学习例子&#xff0c;假如你已经完成了正则化线性回归&#xff0c;也就是最小化代价函数J的值。假如在你得到你的学习参数以后把它应用到放到一组新的房屋样本上进行测试&#xff0c;发现在预测房价时产…

Tiny Core Linux 4.5 发布,微型 Linux 操作系统

世界上最小的Linux桌面发行版——Tiny Core Linux 今天发布了4.5版本。Tiny Core Linux是一个基于Linux2.6版本内核&#xff0c;采用BusyBox、Tiny X、FLTK 和其它小型软件构筑的带图形用户界面的微型Linux操作系统。由于体积很小&#xff0c;大约10MB&#xff0c;故采用整体装…

30-- 返回倒数第 k 个节点

文章目录1.问题描述2.代码详情1.问题描述 实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回该节点的值。 输入&#xff1a; 1->2->3->4->5 和 k 2 输出&#xff1a; 4 2.代码详情 设置快和慢两个指针&#xff0c;初始化时快指针比慢指针多走k-1步…

maven的web工程打包为war并部署到服务器

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.在maven工程上右键 --> export --> 选择WAR file --> next 2. 点击Browse... 选择导出后存放位置 3. 将工程名改为ROOT.war…

使用线程池的好处

第一&#xff1a;降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二&#xff1a;提高响应速度。当任务到达时&#xff0c;任务可以不需要等到线程创建就能立即执行。第三&#xff1a;提高线程的可管理性。线程是稀缺资源&#xff0c;如果无限制的创建…

5.19 - Stacks and Queues

Decode Stringk[encoded_string] 的编码字符串&#xff0c;将编码的字符重复k次&#xff0c;最后打印出一个完整的字符串。 思路&#xff1a;使用栈结构&#xff0c;由里层向外层&#xff0c;层层解码&#xff0c;当遇到了[ 字符时&#xff0c;向stack当中添加元素&#xff0c;…

Hive笔记之严格模式(strict mode)

Hive有一个严格模式&#xff0c;在严格模式下会对可能产生较大查询结果的语句做限制&#xff0c;禁止其提交执行。 一、切换严格模式 查看当前的模式&#xff1a;hive> set hive.mapred.mode; hive.mapred.mode is undefined 未定义即为false&#xff0c;即no-strict模式。 …

Notepad++ 6.0 发布,优化了大文件加载性能

开源编辑器Notepad今天发布了最新的6.0版本。 Notepad 是一款免费的开源跨平台代码编辑器。它支持包括中文在内的多国语言&#xff0c;功能强大&#xff0c;除了可以用来制作一般的纯文字说明文件外&#xff0c;也可以作为代码编辑器。Notepad不仅可以实现语法高亮显示&#x…

31-- 二叉搜索树的范围和

文章目录1.问题描述2.代码详情1.问题描述 给定二叉搜索树的根结点 root&#xff0c;返回 L 和 R&#xff08;含&#xff09;之间的所有结点的值的和。 二叉搜索树保证具有唯一的值。 示例 1&#xff1a; 输入&#xff1a;root [10,5,15,3,7,null,18], L 7, R 15 输出&…

java中 flush()方法

一般主要用在IO中&#xff0c;即清空缓冲区数据&#xff0c;就是说你用读写流的时候&#xff0c;其实数据是先被读到了内存中&#xff0c;然后用数据写到文件中&#xff0c;当你数据读完的时候不代表你的数据已经写完了&#xff0c;因为还有一部分有可能会留在内存这个缓冲区中…

JDK下载地址、SecureCRT中JDK安装和环境配置、SecureCRT窗口编程、linux下命令运行小程序

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 下载linux版本的JDK。java SE、java EE JDK是通用的&#xff0c; 32位系统选Linux x86&#xff0c; 64位系统选Linux x64&#xff…

HTMLTestRunner 汉化版---来源一个大神的源码(加了失败截图,用例失败重新执行 功能)...

HTMLTestRunner 汉化版 20170925 测试报告完全汉化&#xff0c;包括错误日志的中文处理针对selenium UI测试增加失败自动截图功能增加失败自动重试功能增加饼图统计同时兼容python2.x 和3.x20180402 表格样式优化修复部分bug增加截图组&#xff0c;可展示多张截图&#xff0c;首…

PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilder

一.问题描述&#xff1a;pom.xml导入依赖时报错 PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilder 二.解决方法&#xff1a; 1.加入ali镜像源 <repositories><repository><id>maven-ali</id><url>https://mave…