Loop`s Workshop

Appearance

let 与 const ​

let 命令 ​

基本用法 ​

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

js
{
  let a = 10; // 块级作用域
  var b = 1; // 全局作用域
}
a // ReferenceError: a is not defined.
b // 1
  • for循环的计数器，就很合适使用let命令，不适合用var
js
// let 就不写了。

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

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

当变量i用var声明的，那么在全局范围内都有效，所以全局只有一个变量i。而数组a的函数内部的console.log(i)，所有的i指向的就是上层作用域中的全局的i。

当 let 用在 for 循环的初始化部分时（for (let i = ...)），JavaScript 引擎会为每一轮循环创建一个新的 i 变量，并将上一轮的值复制过来。

所以，数组a的函数内部的console.log(i)都指向不同的变量

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

js
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

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

特性 ​

无变量提升 ​

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

js
console.log(foo); // 输出undefined
var foo = 2;

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

js
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区 TDZ ​

📘 定义

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

暂时性死区通常会抛出错误 ReferenceError: Cannot access 'xxx' before initialization

📘变量绑定

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

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

js
var tmp = 123;
if (true) {
  // TDZ start
  tmp = 'abc'; // ReferenceError ! 这样子是会报错的
  let tmp; // TDZ end
}

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

📘typeof 不再安全

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

js
typeof x; // ReferenceError
let x;

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。

js
typeof foo // "undefined"`

所以，在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。

📘隐蔽的TDZ

函数的形参其实也可以理解为 let

js
function bar(x = y, y = 2) {
  return [x, y];
}
function foo(y = 2, x = y) {
  return [x, y];
}
foo(); // OK
bar(); // ReferenceError

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

不允许重复声明 ​

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

const 命令 ​

基本用法 ​

const声明一个只读的常量。一旦声明，常量的值就不能改变。

js
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

js
const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错。

const 与 let 有许多相同的特性：

  • 只在声明所在的块级作用域内有效。
  • 无变量提升，存在 TDZ
  • 不可重复声明

本质 ​

都说const是声明常量，但实际上这个常量并不是说变量的值不可改动，而是说，我这个只想变量的指针不可改动。

  • 如果指向的是原始类型(number,string,bool...)那就表现为值不可变
  • 如果指向的是对象类型，那只能保证的是我这个指针总是指向这个对象的地址，这个对象可以做任何修改。但我们不能把指针指向其他！

比如数组：

js
const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // TypeError: Assignment to constant variable.

如果希望对象冻结不可改，应该使用Object.freeze方法。

js
const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

块级作用域 ​

Why ？ ​

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

第一种场景，内层变量可能会覆盖外层变量。var 会在当前作用域（函数作用域或全局作用域）提升变量。

js
var tmp = new Date();
function f() {
  // 我们在一行行写代码时，期望的这里的 tmp 是外层作用域的 tmp
  // 可是在这里会因为变量提升导致访问得到 undefined
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined

第二种场景，临时用来计数的变量泄露为全局变量。

js
var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // i 存在于全局

ES6 的块级作用域 ​

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

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

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

  • ES6 允许块级作用域的任意嵌套。
  • 内层作用域可以定义外层作用域的同名变量。