【前端工程师手册】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 = 上次迭代结束的i setTimeout(function() { console.log(i) }, i*1000) }
所以5个匿名函数引用的并不是同一个i,自然就会顺利的间隔一秒分别打印出1、2、3、4、5了
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
【前端工程师手册】JavaScript之作用域
【前端工程师手册】JavaScript之作用域 什么是作用域 来一段《你不知道的JavaScript-上卷》中的原话: 几乎所有编程语言最基本的功能之一,就是能够储存变量当中的值,并且能在之后对这个 值进行访问或修改,这些变量住在哪里?换句话说,它们储存在哪里?最重要的是,程序需要时如何找到它们?这些问题说明需要一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。这套规则被称为作用域 总之就是作用域就是一套规则,这个规则规定了程序如何去找到变量 词法作用域 先看一个例子: function func1() { console.log(index) } function func2() { var index = 10 func1() } var index = 100 func2() // 100 为啥是100而不是10呢??? 因为JavaScript是词法作用域 词法作用域简单地说就是:函数的作用域在声明的时候就决定好了。和词法作用域相对的是动态作用域,动态作用域关注函数从何处调用 上面的代码中,声明func1时,它就处于全局作用域中,所以index就是100,即使执行f...
- 下一篇
python版本升级
[root@kazihuo~]# yum -y install gcc gcc-c++ [root@kazihuo /soft]# wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz [root@kazihuo /soft]# tar xvf Python-3.6.5.tgz [root@kazihuo /soft/Python-3.6.5]# ./configure --prefix=/usr/local/python3.6.5 [root@kazihuo /soft/Python-3.6.5]# make && make install [root@kazihuo /usr/bin]# rm python [root@kazihuo /usr/bin]# ln -sv /usr/local/python3.6.5/bin/python3 /usr/bin/python [root@kazihuo ~]# python -V Python 3.6.5 注意: 因为yum使用python2,替换为...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7设置SWAP分区,小内存服务器的救世主
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS关闭SELinux安全模块