每种编程语言都有变量,声明变量的方法各不同,在 JavaScript 里面,最经典的 var 声明一个变量,当 ECMAScript6 出现后,新增了 2 个声明变量的方法:let 和 const,那何时创建变量,用什么声明变量方法会更好呢,下面我们通过一些小栗子来解答看看。
一、var 声明
1、存在变量提升,实际上var无论在哪里声明,都会被当做当前的作用域顶部声明变量
2、可以重复声明,后声明的变量会覆盖前声明的变量
- // var 的变量提升机制
- function getValue(condition) {
- if (condition) {
- var values = 'Bob';
- return values;
- } else {
- console.log(values); // 这里访问到 values 是 undefined,原因下面解释:
- return null;
- }
- }
- // 原因解释:为什么上面的代码 else 还能访问 values 的值,虽然是 undefined
- // 无论变量 values 都会被创建,在编译过程中,JavaScript 引擎会将上面的 getValue 函数修改成这样:
- function getValue(condition) {
- // 重点看这里,变量values的声明被提升到函数顶部
- var values;
- if (condition) {
- values = 'Bob';
- return values;
- } else {
- console.log(values); // 所以这里访问到是声明过的但未赋值的 values,所以是 undefined
- return null;
- }
- }
二、let 声明
1、不存在变量提升
2、禁止重复声明
3、块级作用域,只在当前作用域块有用
4、临时死区,而且不能在声明之前访问它
- // let 块级作用域 && 不存在变量提升
- function getValue(condition) {
- if (condition) {
- // 使用let声明变量
- let values = 'Bob';
- return values;
- } else {
- console.log(values);
- // 这里报错: ReferenceError: values is not defined..
- // 原因就是用let声明的变量,是不存在变量提升的,
- // 而且values变量只能在 if{ 这个作用块里面有效 } 外面是访问不到的
- // 同时,在外面访问不仅会访问不到,而且会报错
- return null;
- }
- }
- // let 禁止重复声明相同变量
- function getValue() {
- var values = "Bob";
- let values = {name: 'Bob'};
- // 使用let声明变量禁止重复声明已经有的变量名
- // 否则报错:SyntaxError: Identifier 'values' has already been declared
- }
三、const 声明
1、const 声明的是常量,其值一旦确定后不可以修改
2、const 声明常量时候必须要进行赋值
3、const 不存在变量提升,一旦执行快外就会立即销毁
4、const 只能在当前代码块级有效
5、const 不能重复声明相同常量
6、const 声明不允许修改绑定,但允许修改值,也就是说可以修改该对象的属性值
- function getValue() {
- // 声明一个常量
- const USER_NAME = "张三";
- // 禁止重复声明相同常量,否则报错:TypeError: Assignment to constant variable.
- // const USER_NAME = "Bob";
- // 记住:const声明不允许修改绑定,但允许修改值,
- // 也就是说用const创建对象后,可以修改该对象的属性值
- const STUDYENT = {
- name: '张三'
- };
- console.log(`STUDYENT.name = ${STUDYENT.name}`); // STUDYENT.name = 张三
- STUDYENT.name = 'Bob';
- console.log(`STUDYENT.name = ${STUDYENT.name}`); // STUDYENT.name = Bob
- }
四、全局块级作用域绑定
- var RegExp = "Bob";
- // 即使是全局对象 RegExp 定义在 window ,也不能幸免被 var 声明覆盖
- console.log(RegExp); // Bob
- console.log(window.RegExp); // Bob
- let RegExp = "Bob";
- // 用let或const声明不能覆盖全局变量,而只能屏蔽它
- console.log(RegExp); // Bob
- console.log(window.RegExp); // undefined
- console.log(window.RegExp === RegExp); // false
- const ncz = 'Hi!'
- console.log('ncz' in window); // false
博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~
继续阅读
2019年6月5日 上午11:22 1F
我是中文。