JavaScript的var,let和const有什么区别
本篇内容主要讲解“JavaScript的var,let和const有什么区别”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript的var,let和const有什么区别”吧!
为鹰手营子等地区用户提供了全套网页设计制作服务,及鹰手营子网站建设行业解决方案。主营业务为网站设计、成都网站设计、鹰手营子网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
ES5与ES6的区别
1. 作用域
使用不同的关键字来声明变量,主要就是对变量的作用域有不同的限制,因此var和let最主要的区别就是变量作用域的区别。
var声明的范围是函数作用域,函数体之外无法访问到函数体内声明的var变量。
做题的时候经常会有在全局和函数体内声明同名变量的场景,要知道不同作用域的变量是不会互相干扰的。
var a = 10; function logA() { var a = 20; console.log(a); // 20 } console.log(a); // 10
let声明的范围是块作用域,块作用域是函数作用域的子集,可以使用花括号
{...}
来限定块级作用域。
2. 全局属性
在全局作用域下使用var和let声明变量,变量都是会在页面的声明周期内存续。
但是使用var声明的变量会成为window对象的属性,使用let声明则不会。
3. 变量提升与暂时性死区
var声明存在变量提升的行为。
变量的声明、初始化和赋值被分为三步进行,对于var变量,声明和初始化会被提升到作用域的顶部。
也就是说,编译器在遇到var声明时,会先在作用域顶部声明一个var变量并将其初始化为undefined值。
因此在代码执行流遇到var声明语句之前访问var变量并不会报错,而是会访问到undefined值。
(function example() { console.log(age); // undefined var age = 20; })(); // 相当于 (function example() { var age; console.log(age); // undefined age = 20; })();
ES6对先访问后声明变量的行为做了约束,因此let和const声明会存在TDZ暂时性死区。
即JavaScript引擎在编译时如果遇到let和const声明,会将它们放入暂时性死区以阻止访问,只有在执行到变量声明的语句后,才会将变量从TDZ中移出。
因此如果在变量声明语句之前访问变量,相当于企图访问TDZ中的变量,JavaScript会抛出运行时错误ReferenceError
。
ES5的变量提升和ES6的暂时性死区的区别还有一个“副作用”就是改变了
typeof
操作对于变量的访问性。已知在ES5时对于未声明变量唯一的安全操作是
typeof
,会返回undefined值。TDZ的出现导致即使使用
typeof
,也不能在let和const声明语句执行之前访问let和const变量,依然会报ReferenceError
。
4. 重复声明
var声明是允许重复的,可以重复使用var关键字来声明同名变量,后来声明的变量值会覆盖之前的值。
为了阻止重复声明变量这个容易让人迷惑的行为,ES6限制了let和const声明的变量都是不可重复的,如果重复声明会报
SyntaxError
错误。
这个限制不仅体现在let声明对let声明,如果想用let去重复声明var变量也是不被允许的。
let与const的区别
1. 常量
同样都是ES6的变量声明关键字,let和const的区别就在于使用const声明创建的是一个值的只读引用。
只读引用意味着对于原始值来说,const声明不可以再重新赋值;
对于引用值来说,const声明不可以再修改引用,但是可以修改对象的属性值或者数组内部的值。
最佳实践
尽量不使用var。因为let和const已经可以替代var的位置,满足开发需求,顺便还规避了很多不必要的问题。
优先使用const声明,let声明次之。const声明有点像保护变量的机制,它能预防和阻止预期之外的变量修改。 对于有修改需求的变量,就使用let声明。
到此,相信大家对“JavaScript的var,let和const有什么区别”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网页题目:JavaScript的var,let和const有什么区别
URL地址:http://myzitong.com/article/jdpipc.html