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

Admin
Admin
Admin
52
文章
6
评论
更多
 2018年5月30日11:04:28 1 10,653 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";
  7.     // 记住：const声明不允许修改绑定，但允许修改值，
  8.     // 也就是说用const创建对象后，可以修改该对象的属性值
  9.     const STUDYENT = {
  10.         name: '张三'
  11.     };
  12.     console.log(`STUDYENT.name =  ${STUDYENT.name}`); // STUDYENT.name =  张三
  14.     STUDYENT.name = 'Bob';
  15.     console.log(`STUDYENT.name =  ${STUDYENT.name}`); // STUDYENT.name =  Bob
  16. }

四、全局块级作用域绑定

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

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

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

Vue 中计算属性和侦听器

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

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

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

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

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

发表评论

匿名网友 填写信息

:?: :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
      2019年6月5日 上午11:22 1F
      回复

      :razz: 我是中文。