经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript中var与let的区别
来源:jb51  时间:2021/12/8 12:43:52  对本文有异议

前言:

varJavaScript刚出现时就存在的变量声明关键字,而let作为ES6才出现的变量声明关键字,无疑两者之间存在着很大的区别。那么具体有哪些区别呢?

1.作用域表现形式不同

var是函数作用域,let是块级作用域

  1. {
  2. var monkey='熏悟空';
  3. let pig='猪扒盖';
  4. }
  5. console.log(monkey); //输出undefined
  6. console.log(pig); //报错:pig is not deined
  7.  
  8.  

由上面代码可见,let声明的变量只在其所在的代码块有效,在代码块外部无效无法访问,而var声明的变量在该代码块所在的函数作用域内都有效。

2.是否变量提升的区别

var声明的变量会进行变量提升,let声明的变量不会进行变量提升。

  1. console.log(monkey); //undefined
  2. var monkey='熏悟空';
  3.  
  4. console.log(pig); //报错:pig is not defined
  5. let pig='猪扒盖';
  6.  
  7.  

同样的逻辑,为什么var声明的变量在它声明之前调用会显示未定义,而let声明的变量在声明之前调用会抛出异常呢,这就是两者在变量提升上的区别,var声明的变量存在变量提升,let声明的变量不存在变量提升。

那么什么叫变量提升呢,我这里不做概念性的描述,我只说我个人的理解,就是以上代码实际上相当于如下:

  1. var monkey;
  2.  
  3. console.log(monkey); //undefined
  4. monkey='熏悟空';
  5.  
  6. console.log(pig); //报错:pig is not defined
  7. let pig='猪扒盖';
  8.  

看见区别了吗,var声明的变量会将声明的变量提取到作用域的最上面进行定义但不赋值,赋值操作还是在你的代码处,所以你在调用var声明的变量时就是一个已经声明但是并未定义值的变量,所以调用结果就是undefined,这就是所谓的变量提升。而let定义的变量不存在这种变量提升。

3.暂时性死区上的区别

暂时性死区:如果在某一作用域内let了一个变量,如果外部作用域中有相同名称的变量,那么就算在作用域内进行了更改,也不会影响到外部作用域

具体表现如下:

  1. for(var i=0;i<5;i++){
  2. setTimeout(function(){
  3. console.log(i)
  4. },1000)
  5. }
  6. for(let i=0;i<5;i++){
  7. setTimeout(function(){
  8. console.log(i)
  9. },1000)
  10. }
  11.  
  12.  

请问这两处代码的运行结果分别是什么?

第一处代码运行完毕的结果是1s后顺序打印5个5;第二处代码运行完毕的结果是1s后顺序打印0,1,2,3,4。

请问为什么会存在这种区别?

因为第一处代码的变量i由var关键字声明,不存在关键性死区,即你在1s后setTimeout中访问到的变量i是全局上下文中for循环运行完毕之后的i,所以打印的结果全是5;

而第二处代码的变量i由let关键字声明,产生了关键性死区,存在setTimeout中的i变量是你当时存储时的i的值,这个存储区间的i不会因为外面有相同的i变量且赋了不同的值而改变,他依旧是之前存储进去的值,这就是暂时性死区的表现,也是为什么第二处代码运行完毕是顺序打印0,1,2,3,4的原因。

4.在同一个上下文中var可以重复声明,let不行

  1. let monkey='熏悟空';
  2. let monkey='逼马吻'; //报错:Identifier 'a' has already been declared
  3. var pig='猪扒盖';
  4. var pig='猪肛裂'; //正常访问,变量pig的值被替换

到此这篇关于JavaScript中var与let的区别的文章就介绍到这了,更多相关JavaScript中var与let内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号