ES6入门（一）

let及块级作用域

在介绍 let 之前，先来详细了解一下 var 声明的变量。
注意：JavaScript 在函数（类）内部用 var 声明的变量在函数外面是不可访问的。即使用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁，例如：

1
2
3
4
5
function test(){ 
  var message = 'hi'; // 局部变量 
} 
test(); 
alert(message); // 错误！

这里，变量 message 是在函数中使用 var 定义的。当函数被调用时，就会创建该变量并为其赋值。而在此之后，这个变量又会立即被销毁，因此例子中的下一行代码就会导致错误。 如果 var 是在全局域中声明，则为全局变量 。不过，可以像下面这样省略 var 操作符，从而在函数中创建一个 全局变量 ：

1
2
3
4
5
function test(){ 
  message = 'hi'; // 全局变量 
} 
test(); 
alert(message); // “hi”

这个例子省略了 var 操作符，因而 message 就成了全局变量。这样，只要调用过一次 test() 函数，这个变量就有了定义，就可以在函数外部的任何地方被访问到。
但是我们并不提倡这种做法，这样隐式创建一个全局变量会造成代码污染。

let用法

ES6 新增了 let 命令，用来声明变量。它的用法类似于 var ，但是所声明的变量，只在 let 命令所在的代码块内有效(一般代码块是指用‘{}’括起来的部分)。

1
2
3
4
5
6
7
{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

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

1
2
3
4
5
6
for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined

上面代码中，计数器 i 只在for循环体内有效，在循环体外引用就会报错。

下面的代码如果使用 var ，最后输出的是 10 。

1
2
3
4
5
6
7
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量 i 是 var 命令声明的，在全局范围内都有效，所以全局只有一个变量 i 。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的 i 指向的就是全局的 i 。也就是说，所有数组a的成员里面的 i ，指向的都是同一个 i ，导致运行时输出的是最后一轮的 i 的值，也就是 10。

如果使用 let ，声明的变量仅在块级作用域内有效，最后输出的是 6。

1
2
3
4
5
6
7
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量 i 是 let 声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是 6 。并且 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

1
2
3
4
5
6
7
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

let不存在变量提升

var 命令会发生 “变量提升” 现象，即变量可以在声明之前使用，值为 undefined 。

1
2
3
4
5
6
7
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

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

暂时性死区

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

1
2
3
4
5
var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面代码中，存在全局变量 tmp ，但是块级作用域内 let 又声明了一个局部变量 tmp ，导致后者绑定这个块级作用域，所以在 let 声明变量前，对 tmp 赋值会报错。
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

不允许重复声明

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

1
2
3
4
5
6
7
8
9
10
11
// 报错
function func() {
  let a = 10;
  var a = 1;
}
// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数。

1
2
3
4
5
6
7
8
9
function func(arg) {
  let arg; // 报错
}
function func(arg) {
  {
    let arg; // 不报错
  }
}

函数体内使用 var 声明同一个参数变量，不报错，并绑定函数体作用域；使用 let 声明同一个参数变量，就会报句法错误。可以近似认为函数参数是 var 声明的。

块级作用域

let 增加了块级作用域，防止了函数作用域导致的内部变量覆盖外部变量的问题。如下例：

1
2
3
4
5
6
7
8
9
10
var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined

上面代码的原意是，if 代码块的外部使用外层的 tmp 变量，内部使用内层的 tmp 变量。但是，函数 f 执行后，输出结果为 undefined ，原因在于变量提升，导致内层的 tmp 变量覆盖了外层的 tmp 变量。而 let 声明将不会导致这种问题。

ES6 允许块级作用域的任意嵌套，且外层作用域无法读取内层作用域的变量，内层作用域可以定义外层作用域的同名变量。

函数声明

在浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于 var 声明的变量。有下列三条规则：

  • 允许在块级作用域内声明函数。
  • 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
  • 同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作 let 处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function
// 实际运行的是下面的代码。
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f();
}());

因此，应该避免在块级作用域内声明函数。还需注意，ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

const声明

本质上，const 保证的并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。应避免将数组或对象用 const 声明为常量。

1
2
3
4
5
6
7
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

const 声明一个只读的常量。一旦声明，常量的值就不能改变。且一旦声明，就必须立即初始化，不能留到以后赋值，否则会报错。

const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效。const 也不存在变量提升，同样存在暂时性死区，只能在声明的位置后面使用，且不可在相同作用域内重复声明。

顶层对象的属性

顶层对象在浏览器中指 window 对象，在 Node 指的是 global 对象。ES5 之中，顶层对象的属性与全局变量是等价的。

1
2
3
4
5
window.a = 1;
a // 1
a = 2;
window.a // 2

而 ES6 规定，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。