ES6学习笔记之let && const

2016-01-31

ES6新增了let和const命令，用来声明变量。

let命令

基本用法

let的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 6;
}
console.log(a); //undefined
console.log(b); //6

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量undefined，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

不存在变量提升

console.log(foo); // undefined
console.log(bar); // Uncaught ReferenceError: bar is not defined
var foo = 2;
let bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp = 123;
if (true) {
  tmp = 'abc'; // Uncaught ReferenceError: tmp is not defined
  let tmp;
}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称TDZ）。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

{
  let a = 10;
  var a = 1; // Uncaught SyntaxError: Unexpected identifier
}
{
  let a = 20;
  let a = 2; // Uncaught SyntaxError: Unexpected identifier
}
function func(arg) {
  let arg; // Uncaught SyntaxError: Identifier 'arg' has already been declared
}
function func(arg) {
  {
    let arg; // undefined
  }
}

块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

内层变量可能会覆盖外层变量

var tmp = 'abc';
function f(){
  console.log(tmp);
  var tmp = "hello world";
}
f() // undefined

上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

用来计数的循环变量泄露为全局变量

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6中的let实际上为JavaScript新增了块级作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); 
}
f1(); // 5

另外，ES6也规定，函数本身的作用域，在其所在的块级作用域之内。

function f() { console.log('I am outside!'); }
(function () {
  if(false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f();
}());

上面代码在ES5中运行，会得到“I am inside!”，但是在ES6中运行，会得到“I am outside!”。这是因为ES5存在函数提升，不管会不会进入 if代码块，函数声明都会提升到当前作用域的顶部，得到执行；而ES6支持块级作用域，不管会不会进入if代码块，其内部声明的函数皆不会影响到作用域的外部。

上面代码中，块级作用域外部，无法调用块级作用域内部定义的函数。如果确实需要调用，就要像下面这样处理。

let f;
{
  let a = 'secret';
  f = function () {
    return a;
  }
}
f() // "secret"

ES5的严格模式规定，函数只能在顶层作用域和函数内声明，其他情况（比如if代码块、循环代码块）的声明都会报错。

// ES5
'use strict';
if (true) {
  function f() {} // undefined
}

const命令

const这个声明创建了一个常量，可以在全局作用域或者函数内声明常量，在定义常量的同时必须初始化，常量的值不能通过再赋值改变，也不能再次声明。

1 2	const PI = 3.1415; PI = 3; Uncaught TypeError: Identifier 'PI' has already been declared

文章参考ECMAScript 6 入门