开发者社区> 优惠码发放> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

【前端工程师手册】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了

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js-作用域&闭包实践与分析
js-作用域&闭包实践与分析
0 0
重学 JavaScript 作用域和闭包(下)
1. 作用域 对于多数编程语言,最基本的功能就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后,应该把它放在哪里、程序如何找到它们?是否需要提前约定好一套存储变量、访问变量的规则?答案是肯定的,这套规则就是作用域
0 0
重学 JavaScript 作用域和闭包(上)
1. 作用域 对于多数编程语言,最基本的功能就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后,应该把它放在哪里、程序如何找到它们?是否需要提前约定好一套存储变量、访问变量的规则?答案是肯定的,这套规则就是作用域
0 0
《你不知道的JavaScript》整理(一)——作用域、提升与闭包
最近在读一本进阶的JavaScript的书《你不知道的JavaScript(上卷)》,里面分析了很多基础性的概念。 可以更全面深入的理解JavaScript深层面的知识点。
0 0
「注解」《你不知道的JavaScript(上卷)》第五章:作用域闭包
「注解」《你不知道的JavaScript(上卷)》第五章:作用域闭包
0 0
JS(作用域与闭包)
JS(作用域与闭包) 1.对变量提升的理解 1.变量定义(上下文) 2.函数声明 2.说明 this 几种不同的使用场景 常见用法 1.
1020 0
+关注
优惠码发放
阿里云优惠码阿里云推荐券bieryun.com
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript面向对象的程序设计
立即下载
JavaScript异步编程
立即下载
JavaScript 语言在引擎级别的执行过程
立即下载