深入理解 ES6 中的 var、let 和 const 的区别

Admin
Admin
Admin
52
文章
6
评论
2018年5月30日11:04:28 1 9,489 2466字阅读8分13秒

每种编程语言都有变量,声明变量的方法各不同,在 JavaScript 里面,最经典的 var 声明一个变量,当 ECMAScript6 出现后,新增了 2 个声明变量的方法:let 和 const,那何时创建变量,用什么声明变量方法会更好呢,下面我们通过一些小栗子来解答看看。

一、var 声明

1、存在变量提升,实际上var无论在哪里声明,都会被当做当前的作用域顶部声明变量

2、可以重复声明,后声明的变量会覆盖前声明的变量

  1. // var 的变量提升机制
  2. function getValue(condition) {
  3.     if (condition) {
  4.         var values = 'Bob';
  5.         return values;
  6.     } else {
  7.         console.log(values); // 这里访问到 values 是 undefined,原因下面解释:
  8.         return null;
  9.     }
  10. }
  11. // 原因解释:为什么上面的代码 else 还能访问 values 的值,虽然是 undefined
  12. // 无论变量 values 都会被创建,在编译过程中,JavaScript 引擎会将上面的 getValue 函数修改成这样:
  13. function getValue(condition) {
  14.     // 重点看这里,变量values的声明被提升到函数顶部
  15.     var values;
  16.     if (condition) {
  17.         values = 'Bob';
  18.         return values;
  19.     } else {
  20.         console.log(values); // 所以这里访问到是声明过的但未赋值的 values,所以是 undefined
  21.         return null;
  22.     }
  23. }

二、let 声明

1、不存在变量提升

2、禁止重复声明

3、块级作用域,只在当前作用域块有用

4、临时死区,而且不能在声明之前访问它

  1. // let 块级作用域 && 不存在变量提升
  2. function getValue(condition) {
  3.     if (condition) {
  4.         // 使用let声明变量
  5.         let values = 'Bob';
  6.         return values;
  7.     } else {
  8.         console.log(values);
  9.         // 这里报错: ReferenceError: values is not defined..
  10.         // 原因就是用let声明的变量,是不存在变量提升的,
  11.         // 而且values变量只能在 if{ 这个作用块里面有效 } 外面是访问不到的
  12.         // 同时,在外面访问不仅会访问不到,而且会报错
  13.         return null;
  14.     }
  15. }
  16. // let 禁止重复声明相同变量
  17. function getValue() {
  18.     var values = "Bob";
  19.     let values = {name: 'Bob'};
  20.     // 使用let声明变量禁止重复声明已经有的变量名
  21.     // 否则报错:SyntaxError: Identifier 'values' has already been declared
  22. }

三、const 声明

1、const 声明的是常量,其值一旦确定后不可以修改

2、const 声明常量时候必须要进行赋值

3、const 不存在变量提升,一旦执行快外就会立即销毁

4、const 只能在当前代码块级有效

5、const 不能重复声明相同常量

6、const 声明不允许修改绑定,但允许修改值,也就是说可以修改该对象的属性值

  1. function getValue() {
  2.     // 声明一个常量
  3.     const USER_NAME = "张三";
  4.     // 禁止重复声明相同常量,否则报错:TypeError: Assignment to constant variable.
  5.     // const USER_NAME = "Bob";
  6.     // 记住:const声明不允许修改绑定,但允许修改值,
  7.     // 也就是说用const创建对象后,可以修改该对象的属性值
  8.     const STUDYENT = {
  9.         name: '张三'
  10.     };
  11.     console.log(`STUDYENT.name =  ${STUDYENT.name}`); // STUDYENT.name =  张三
  12.     STUDYENT.name = 'Bob';
  13.     console.log(`STUDYENT.name =  ${STUDYENT.name}`); // STUDYENT.name =  Bob
  14. }

四、全局块级作用域绑定

  1. var RegExp = "Bob";
  2. // 即使是全局对象 RegExp 定义在 window ,也不能幸免被 var 声明覆盖
  3. console.log(RegExp);        // Bob
  4. console.log(window.RegExp); // Bob
  5. let RegExp = "Bob";
  6. // 用let或const声明不能覆盖全局变量,而只能屏蔽它
  7. console.log(RegExp);                    // Bob
  8. console.log(window.RegExp);             // undefined
  9. console.log(window.RegExp === RegExp);  // false
  10. const ncz = 'Hi!'
  11. console.log('ncz' in window);           // false

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2018年5月30日11:04:28
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论 取消回复

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  0   博主  0
    • 我是中文 我是中文 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市天河区 电信 1

      :razz: 我是中文。