文档章节

我用了两个月的时间才理解 let

FeanLau
 FeanLau
发布于 2017/09/03 14:16
字数 849
阅读 21
收藏 0

当然不是说用完整的两个月时间来理解 let,而是零零碎碎地理解,同时我还要想着怎么写出一篇文章把这个事情说清楚。

在 let 刚出来的时候,我就「以为」我理解了 let。然鹅在过去的两个月里,我对 let 的理解发生了一波三折的变化。

我写这篇文章,是希望我的学习过程,能对你自学有帮助。

初识 let

跟很多人一样,我第一次了解 let 的特性是从 MDN 的文档:

我得到的信息有这么几条:

  • let 声明的变量的作用域是块级的;
  • let 不能重复声明已存在的变量;
  • let 有暂时死区,不会被提升。

大部分人应该都是这么认为的,我也是这么理解的。

第一次质疑

我第一次质疑我的理解是在遇到 for 循环的时候,代码如下。

// 代码段1
var liList = document.querySelectorAll('li') // 共5个li
for( var i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(i)
  }
}

大家都知道依次点击 li 会打印出 5 个 5。如果把 var i 改成 let i,就会分别打印出 0、1、2、3、4

// 代码段2
var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(i)
  }
}

然而,用我之前的知识来理解这个代码是不能自圆其说的。因为代码中依然只声明了一个 i,在 for 循环结束后,i 的值还是会变成 5 才对。

这说明我的理解有误。

于是我去看 MDN 的例子,发现鸡贼的 MDN 巧妙地避开了这个问题,它的例子是这样的:

你看 MDN 的例子,在每次循环的时候用 let j 保留的 i 的值,所以在 i 变化的时候,j 并不会变化。而console.log 的是 j,所以不会出现 5 个 5。

为什么 MDN 要故意声明一个 j 呢,为什么不直接用 i 呢?

我猜测 MDN 为了简化知识,隐瞒了什么。

于是我去看了看 ES 文档,其中的 13.7.4.7 章节 清楚地说明了个中缘由,但是由于说得太清楚了,很多人都看不下去,不信你可以试试。

我说一下我的理解:

  1. for( let i = 0; i< 5; i++) 这句话的圆括号之间,有一个隐藏的作用域
  2. for( let i = 0; i< 5; i++) { 循环体 } 在每次执行循环体之前,JS 引擎会把 i 在循环体的上下文中重新声明及初始化一次。
  3. 其他细节就不说了,太细碎了

也就是说上面的代码段2可以近似近似近似地理解为

// 代码段3
var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){
  let i = 隐藏作用域中的i // 看这里看这里看这里
  liList[i].onclick = function(){
    console.log(i)
  }
}

那样的话,5 次循环,就会有 5 个不同的 i,console.log 出来的 i 当然也是不同的值。

再加上隐藏作用域里的 i,一共有 6 个 i。

这就是 MDN 加那句 let j = i 的原因:方便新人理解。

总得来说就是 let/const 在与 for 一起用时,会有一个 perIterationBindings 的概念(一种语法糖)。

从此之后,我就开始怀疑我对 let 的所有理解了。

 

本文转载自:https://zhuanlan.zhihu.com/p/28140450

共有 人打赏支持
FeanLau
粉丝 3
博文 221
码字总数 117937
作品 0
浦东
程序员
私信 提问
Let's Encrypt 使用教程,免费的SSL证书,让你的网站拥抱 HTTPS

这篇文章主要讲的就是如何让自己的网站免费从HTTP升级为HTTPS,使用的是 Let's Encrypt的证书。实际上也就是一个Let's Encrypt 免费证书获取教程 。 为什么要上HTTPS,说一个小故事。 从前有...

yzy121403725
2017/11/14
0
0
从菜鸟到架构师(十三)

随着我经验的增长和技术的提高,我已经不满足于现在的工资,公司的工资在业界算是比较低的。 我向伟哥提出过离职的申请,当时想的是跳槽随便都能涨工资。当时和伟哥谈了很久,他说:“我们公...

lynnlovemin
2017/04/19
0
0
smart-socket v1.3.0,不安分的搅局者

smart-socket自发布以来,得到了很多朋友的认可,同时也伴随着的不少的质疑。大部分的质疑是无实际论据支撑的,就是看你不爽,就是你想喷你的项目。对于这样的“朋友”,现在很高兴的通知你们...

三刀蜀黍
2018/01/23
0
0
Java一般要学多久?如是我闻

其实学java一般要多久?因人而异,有些人资质好,头脑聪明几个月就能学会,有些人天生愚钝,理解能力差,不过勤能补拙,只是时间相对长点 要坚持住。不过java相对于C,C++java而言,java无疑简...

ToEnd
2017/12/09
0
0
浅聊这2各月的学习

从今年的7月份学校放暑假,到如今马上又要开学,忽然间2个月的时间已匆匆过去。这两天也没有做出什么具有效率成果的事情,编写一文章做点总结吧。 当暑假即将来临的那会,我已经在着急忙忙的...

wewoor
2012/09/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
30分钟前
2
0
集合练习

package package1;import java.util.ArrayList;import java.util.Collection;import java.util.HashMap;import java.util.List;import java.util.ListIterator;import java.ut......

小橙子的曼曼
34分钟前
2
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linux-tao
55分钟前
2
0
在 Ubuntu 上为 CentOS 编译 Rust 程序

现在 CentOS 8 还没出来,最新的是 CentOS 7.6,上面搭载的 glibc 版本是 2.17,都已经是 2012 年那时候的版本了。 现在开发者比较常用的桌面 Linux 系统,比如 Ubuntu / Debian / Mint / A...

helloclia
今天
18
3
Android Multimedia框架总结(一)MediaPlayer介绍之状态图及生命周期

前言:从本篇开始,将进入Multimedia框架,包含MediaPlayer, Camera, Surface, MediaRecord, 接下来几篇都是MediaPlayer相关。同样看下Agenda如下: MediaPlayer的状态图 Idle 状态 End 状态...

天王盖地虎626
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部