热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript-let和var区别

前提ES5只有函数作用域和全局作用域,var属于ES5。let属于ES6,新增块级作用域。目的是可以写更安全的代码。Theletstatementdeclaresablocks

前提

ES5只有函数作用域和全局作用域,var属于ES5。let属于ES6,新增块级作用域。目的是可以写更安全的代码。
The let statement declares a block scope local variable, optionally initializing it to a value. - MDN

区别
  1. let声明的变量绑定到最近的块级作用域(用{}括起来的)。var绑定到最近的函数作用域或者全局作用域(例如浏览器是window,node是global)。 - stackoverflow
  2. let和var都存在变量提升(hoisting)。但let在声明之前不能访问这个变量(暂时性死区) - 参考1 参考2 参考3

例子1,for loop中的var
for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到异步的任务队列。
    console.log(i);        // 执行这里时,同步代码for循环已经执行完成。
  }, 0);
}

//输出10个10

第一点,var声明的变量绑定到全局作用域,例如浏览器的window对象。第二点,for是同步代码,setTimeout是回调函数(异步编程的一种)。
所以当执行异步队列中的setTimeout里面的console.log执行时,for循环已经完成了,i的值为10,可以用window.i或者global.i查看。

例子2,for loop中的let
for (let i = 0; i <10; i++) {  
  setTimeout(function() {  
    console.log(i);        
  }, 0);
}

// 输出0 1 2 3 4 5 6 7 8 9,符合常理

因为let声明的变量把i绑定到for循环的块级作用域。

例子3,let和var都存在变量提升,只是let不能在声明前调用

拓展延伸 TS;DR: Too short don't read. :)

for(同步) -> setTimeout(回调->异步) -> i形成了闭包,因为setTimeout的块级作用域没有声明i, 所以i是外部引用。那么i就要在外面找,例子1从全局作用域找,例子2从for循环作用域找。

这个简单,普普通通的例子涉及到了同步、异步、闭包、let、var、作用域等知识点。


推荐阅读
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 本文介绍了操作系统的定义和功能,包括操作系统的本质、用户界面以及系统调用的分类。同时还介绍了进程和线程的区别,包括进程和线程的定义和作用。 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • javascript如何判断值是否为undefined
    这篇文章主要介绍“javascript如何判断值是否为undefined”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ja ... [详细]
  • 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • Oracle优化新常态的五大禁止及其性能隐患
    本文介绍了Oracle优化新常态中的五大禁止措施,包括禁止外键、禁止视图、禁止触发器、禁止存储过程和禁止JOB,并分析了这些禁止措施可能带来的性能隐患。文章还讨论了这些禁止措施在C/S架构和B/S架构中的不同应用情况,并提出了解决方案。 ... [详细]
  • IhaveawebapplicationthatusesanActiveXCOMcomponent,forexample:我有一个使用ActiveXCOM组件的Web应用程 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • get()方法用于拦截某个属性的读取操作,如果没有该属性的时候会报一个undefined的,如果结果get处理会返回对应的错误信息varperson{name:张三 ... [详细]
  • [JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
    [JavaScript]多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果:functiontest(){le ... [详细]
  • 用JavaScript实现的太空人手表
    用JavaScript实现的太空人手表-JS写的太空人手表,没有用canvas、svg。主要用几个大的函数来动态显示时间、天气这些。天气的获取用到了AJAX请求。代码中有详细的注释 ... [详细]
  • javascript函数中参数传递问题示例探讨-相信每一位刚接触javascript的同学在函数参数传递上都会很疑惑,原因无他,那就是它的语法太怪异了,你定义一个函数例如funct ... [详细]
  • JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它的,同时它是一门很实用的语言,本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaSc ... [详细]
  • JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言,只能由浏览器解释执行。其中:脚本语言:解释运行( ... [详细]
author-avatar
手机用户2502933251
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有