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

flyer_dev 发布于2019-08-22 17:08 / 3478人阅读

摘要：昨天总结了一些作用域的知识前端工程师手册之作用域，但是发表完发现忘记了一些东西，今天拾个遗。循环完毕之后，，且此时生成了个匿名函数，由于这个匿名函数处在同一个词法作用域中，所以他们引用同一个，所以当他们执行时，自然而然就会打出。

昨天总结了一些作用域的知识【前端工程师手册】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了

参考资料：
你不知道的JavaScript-上卷
let-MDN

云服务器 GPU云服务器 javascript作用域链 javascript手册 javascript入门手册 javascript使用手册

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94899.html

【前端工程师手册】this拾遗之关于箭头函数的种种

摘要：之前总结了的一些常见绑定情况前端工程师手册之的笔记，但是还有一些没有说到，今天继续学习一下。参考资料箭头函数你不知道的上卷之前总结了this的一些常见绑定情况（【前端工程师手册】JavaScript之this的笔记），但是还有一些没有说到，今天继续学习一下。 es6箭头函数先说结论：箭头函数没有自己的this，它是根据外层(函数或者全局，后面会说到箭头函数作为某个对象的方法时的情况...

oogh 2019-08-26 11:55 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

snowLu 2019-08-29 14:05 评论0 收藏0
JavaScript基础拾遗

摘要：由于网景公司希望能在静态页面上添加一些动态效果，于是叫这哥们在两周之内设计出了语言。所以简单说来就是，是一种语言标准，而是网景公司对标准的一种实现。 JavaScript基础拾遗 study notes by Tingting 为啥说JavaScript的基础在平时开发时，我们更多的是在写PHP的逻辑层，但是在写后台时多多少少会写一写JavaScript的代码，有时候我们就会遇到对j...

zhouzhou 2019-08-22 11:15 评论0 收藏0
【前端工程师手册】JavaScript之作用域

摘要：函数作用域和块作用域前面讲了是词法作用域，那么什么时候会创建作用域呢主要是基于函数级别的作用域，也就是每一个函数都会创建一个作用域。函数会被当作函数表达式而不是一个标准的函数声明来处理。什么是作用域来一段《你不知道的JavaScript-上卷》中的原话：几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个值进行访问或修改，这些变量住在哪里?换句话说，它...

Paul_King 2019-08-22 17:06 评论0 收藏0