ES 6 (1): let 和 const 变量声明方式

2016-04-14 本文已影响631人 youngBrain1893

ES 6 系列为学习阮一峰老师 ECMAScript 6 入门的一些笔记。

学习ES 6 第一个概念一般都是 let 和 const，两种新的声明变量的方式。
两者在使用上都类似于 var 用于声明变量。

let, const 与 var 的区别

块级作用域
使用 let 和 const 声明的变量，只在其声明所在代码块内有效(块级作用域)。

 if(true) {
   // 这里声明的 hello 函数只在 if 的块级作用域内有效
   let hello = function() {
     alert('Hello');
   }
 }
 // 试图调用 if 作用域内声明的 hello 方法，错误。
 hello();  // ReferenceError: Can't find variable: hello

JavaScript 代码中需要块级作用域的几个场景:

内层变量可能会覆盖外层变量导致一些不可预知的行为
计数的循环变量泄露为全局变量

块级作用域的出现，让广泛使用的 IIFE （立即执行匿名函数）不再必要。

ES 6 中规定函数（通过function声明的具有变量声明提升的方法时可看出）本身的作用域，在其所在的块级作用域之内。

    function f() { console.log('I am outside!'); }
    (function () {
      if(false) {
        // 重复声明一次函数f
        // 变量声明提升，但是作用域依旧在 if 的块级作用域内
        function f() { console.log('I am inside!'); }
      }
      // 在 IIFE 作用域内调用 f() 
      f();
    }());
上面代码在ES5中运行，会得到“I am inside!”，但是在ES6中运行，会得到“I am outside!”。

变量声明提升(Hoisting) 与暂时性死区
使用 let 和 const 声明的变量都不存在变量声明提升，一个变量必须先声明然后才能使用。

关于暂时性死区：在声明变量之前使用变量会错误。

    let temp = 'global temp';  // 全局作用域下声明的 temp 变量
    if (true) {
      // if 包含的块级作用域中的 temp 引用，由于还没声明所以错误。
      // 这里还涉及到变量绑定的问题，
      // 在 ES 6 中如果一个块级作用域中有存在 let 命令，
      // 它所声明的变量就 '绑定' 在这个区域，不受外部的影响。
      // 这就解释了为什么这里的 temp 没有引用全局的 temp = 'global temp' 
      temp = 'abc';  // ReferenceError

      // 不存在变量声明提示，所以 temp 在该作用域类的声明不会像 ES 3 中一样被放到作用域最开始的地方声明并赋值为 undefined 
      let temp;
    }
    // ReferenceError: Cannot access uninitialized variable.

ES 6 中规定暂时性死区和不存在变量声明提升，主要是为了减少运行时错误，防止在变量声明前使用这个变量，从而导致意料之外的行为。

暂时性死区同时意味着 typeof 不再是一个百分百安全的操作（ReferenceError 错误）。

    let temp = 'global temp';
    if(true){
      // 使用 typeof 操作符作用在 temp 上，由于 if 作用域内的 temp 变量目前处在 暂时性死区中，所以引用错误
      console.log(typeof temp);  
      // ReferenceError: Cannot access uninitialized variable.
      let temp = 'temp';
    }

不能重复声明
使用 let 和 const 声明的变量在同一作用域内不能重复声明。
使用 var 声明的变量如果变量名相同后声明的变量将会覆盖变量原来的值。
全局变量以及全局对象属性
ES 5 中全局对象的属性与全局变量基本是等价的（也有区别，比如通过 var 声明的全局变量不能使用 delete 从 global (window/global) 上删除，在变量的访问上基本等价）。

很容易的在不知不觉中创建了全局变量（全局对象的属性）

ES 6 中做了严格的区分，使用 var 和 function 声明的全局变量依旧作为全局对象的属性，使用 let, const 命令声明的全局变量不属于全局对象的属性。

    let let_test = 'test';
    window.let_test;   // undefined

    var var_test = 'test';
    window.var_test;  // test

const 的一些注意事项

使用 let 声明变量除了以上和 var 不同的地方，其他使用和 var 基本一致，声明的变量可以进行修改。

而使用 const 声明的变量是用来声明一个常量，一旦声明，常量的值是不能改变的。使用时需要注意以下几点:

一旦声明不能修改
严格模式下对已经初始化的常量赋值会报错。
非严格模式下对已经初始化的常量赋值不报错但是无效。
避免只声明不赋值
严格模式下对常量声明的变量只声明不赋值会报错。
if(true) {
'use strict';
const test;
// SyntaxError: Unexpected token ';'. const declared variable 'test' must have an initializer.
}
非严格模式下不会报错，但值是 undefined 且无法修改
复合类型 const 变量保存的是引用
复合类型的常量不指向数据，而是指向数据(heap)所在的地址(stack)，所以通过 const 声明的复合类型只能保证其地址引用不变，但不能保证其数据不变。
```
const arr= [1, 2];
// 修改数据而不修改引用地址，正确执行
arr.push(3);  // [1, 2, 3]

// 修改 arr 常量所保存的地址的值，报错
arr = [];     // TypeError: Attempted to assign to readonly property.
```
对象的冻结
因为复合类型 const 是保存引用的原因所以存在对象的冻结的问题。
简单的使用 const 无法完成对象的冻结。
可以通过 Object.freeze() 方法实现对对象的冻结。
使用 Object.freeze() 方法返回的对象将不能对其属性进行配置(definedProperty()不可用)同时不能添加新的属性和移除(remove)已有属性。

In essence the object is made effectively immutable.
本质上是产生一个有效的不可变对象。

因此对其进行的修改将不会生效。但同样有引用和数据的问题（和复合类型 const 变量保存的是引用一样），所以彻底冻结对象时需要递归的对它的对象属性进行冻结。

ES5只有两种声明变量的方法：var 命令和 function 命令。ES6除了添加 let 和 const 命令，以及import 命令和 class 命令（后面将会学习）。所以，ES6一共有6种声明变量的方法。

ES 6 (1): let 和 const 变量声明方式

let, const 与 var 的区别

const 的一些注意事项

猜你喜欢

热点阅读