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

  • A+
所属分类:前端开发

每种编程语言都有变量,声明变量的方法各不同,在 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

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

发表评论

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

目前评论:1   其中:访客  1   博主  0

    • 我是中文 我是中文 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市天河区 电信 1

      :razz: 我是中文。