【前端工程师手册】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) 的额外空间解决这一问题。 你可以假设数组中…

OpenBSD 5.1 正式版发布

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

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;故采用整体装…

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

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

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…

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…

你很棒的---自我管理方法,一生受用!!!

激励自己--自我暗示 每天写下五件幸福的事 &#xff1a;&#xff08;例12月2日周日&#xff09;1、给爸妈各买了一件衣服 2、出门晒了一下太阳 3、认识了一个新朋友&#xff0c;去了青年湖公园&#xff0c;人生就是一种经历&#xff01;4、看了场电影《命运呼叫转移》悟人生真…

持续集成与自动化部署 - jenkins sonar代码质量管理平台 部署和基础使用(五)...

1 jenkins 安装参考链接 1.1 安装jenkins [roottest-node3 ~]# yum install -y java-1.8.0 [roottest-node3 ~]# cd /etc/yum.repos.d/ [roottest-node3 yum.repos.d]# wget http://pkg.jenkins.io/redhat/jenkins.repo [roottest-node3 yum.repos.d]# rpm --import http://pkg…

【转】数学与编程——求余、取模运算及其性质

一、求余运算&#xff08;Remainder&#xff09; &#xff08;参考维基百科&#xff1a; http://zh.wikipedia.org/wiki/余数 http://en.wikipedia.org/wiki/Remainder http://en.wikipedia.org/wiki/Euclidean_divisionhttp://zh.wikipedia.org/wiki/同余&#xff09; Euclid…

javax.net.ssl.SSLException MESSAGE: closing inbound before receiving peer‘s close_notify

1. 问题描述&#xff1a; ** BEGIN NESTED EXCEPTION ** javax.net.ssl.SSLException MESSAGE: closing inbound before receiving peers close_notifySTACKTRACE:javax.net.ssl.SSLException: closing inbound before receiving peers close_notifyat sun.security.ssl.Alert.…

多线程原理分析面试题理解

系列前言 本系列是本人参加微软亚洲研究院&#xff0c;腾讯研究院&#xff0c;迅雷面试时整理的&#xff0c;另外也加入一些其它IT公司如百度&#xff0c;阿里巴巴的笔试面试题目&#xff0c;因此具有很强的针对性。系列中不但会详细讲解多线程同步互斥的各种“招式”&#xff…

Could not load driverClass “com.mysql.jdbc.Driver“

1. 问题描述 Could not load driverClass “com.mysql.jdbc.Driver” 2. 解决办法 检查是否成功导入了mysql的jdbc的jar包 导入后成功解决 参考文献&#xff1a; https://blog.csdn.net/weixin_43433032/article/details/98494228 感谢作者分享&#xff01;

Django的models操作

一、先看单表操作 增 方式1&#xff1a; models.book.objects.create(Book_name "aaa",Book_info "bbb",Book_price "ccc",Book_num "ddd")方式2&#xff1a;用2个*号传递一个字典进去  book_info {"Book_name":"…

ngingx安装错误 ./configure: error: the HTTP rewrite module requires the PCRE library.

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. ngnix 安装报错&#xff1a; 2. 解决&#xff1a; 安装pcre-devel解决问题&#xff0c;运行命令 yum -y install pcre-devel 3.…