let 和 const 命令

let 命令

基本用法

ES6 新增了 let 命令，用來聲明變量。它的用法類似于 var，但是所聲明的變量，只在 let 命令所在的代碼塊內有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代碼在代碼塊之中，分別用 let 和 var 聲明了兩個變量。然后在代碼塊之外調用這兩個變量，結果 let 聲明的變量報錯，var 聲明的變量返回了正確的值。這表明，let 聲明的變量只在它所在的代碼塊有效。

for 循環(huán)的計數(shù)器，就很合適使用 let 命令。

for(let i = 0; i < arr.length; i++){}

console.log(i)
//ReferenceError: i is not defined

上面代碼的計數(shù)器 i，只在 for 循環(huán)體內有效。

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

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

如果使用 let，聲明的變量僅在塊級作用域內有效，最后輸出的是6。

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

不存在變量提升

let 不像 var 那樣，會發(fā)生“變量提升”現(xiàn)象。

function do_something() {
  console.log(foo); // ReferenceError
  let foo = 2;
}

上面代碼在聲明 foo 之前，就使用這個變量，結果會拋出一個錯誤。

這也意味著 typeof 不再是一個百分之百安全的操作。

if (1) {
  typeof x; // ReferenceError
  let x;
}

上面代碼中，由于塊級作用域內 typeof 運行時，x還沒有值，所以會拋出一個 ReferenceError。

只要塊級作用域內存在 let 命令，它所聲明的變量就“綁定”（binding）這個區(qū)域，不再受外部的影響。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面代碼中，存在全局變量 tmp，但是塊級作用域內 let 又聲明了一個局部變量 tmp，導致后者綁定這個塊級作用域，所以在 let 聲明變量前，對 tmp 賦值會報錯。

ES6 明確規(guī)定，如果區(qū)塊中存在 let 和 const 命令，這個區(qū)塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些命令，就會報錯。

總之，在代碼塊內，使用 let 命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時性死區(qū)”（temporal dead zone，簡稱 TDZ）。

if (true) {
  // TDZ開始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ結束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上面代碼中，在 let 命令聲明變量 tmp 之前，都屬于變量 tmp 的“死區(qū)”。

有些“死區(qū)”比較隱蔽，不太容易發(fā)現(xiàn)。

function bar(x=y, y=2) {
  return [x, y];
}

bar(); // 報錯

上面代碼中，調用 bar 函數(shù)之所以報錯，是因為參數(shù) x 默認值等于另一個參數(shù)y，而此時 y 還沒有聲明，屬于”死區(qū)“。

需要注意的是，函數(shù)的作用域是其聲明時所在的作用域。如果函數(shù) A 的參數(shù)是函數(shù) B，那么函數(shù) B 的作用域不是函數(shù) A。

let foo = 'outer';

function bar(func = x => foo) {
  let foo = 'inner';
  console.log(func()); // outer
}

bar();

上面代碼中，函數(shù) bar 的參數(shù) func，默認是一個匿名函數(shù)，返回值為變量 foo。這個匿名函數(shù)的作用域就不是 bar。這個匿名函數(shù)聲明時，是處在外層作用域，所以內部的 foo 指向函數(shù)體外的聲明，輸出 outer。它實際上等同于下面的代碼。

let foo = 'outer';
let f = x => foo;

function bar(func = f) {
  let foo = 'inner';
  console.log(func()); // outer
}

bar();

不允許重復聲明

let 不允許在相同作用域內，重復聲明同一個變量。

// 報錯
{
  let a = 10;
  var a = 1;
}

// 報錯
{
  let a = 10;
  let a = 1;
}

因此，不能在函數(shù)內部重新聲明參數(shù)。

function func(arg) {
  let arg; // 報錯
}

function func(arg) {
  {
    let arg; // 不報錯
  }
}

塊級作用域

let 實際上為 JavaScript 新增了塊級作用域。

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

上面的函數(shù)有兩個代碼塊，都聲明了變量 n，運行后輸出 5。這表示外層代碼塊不受內層代碼塊的影響。如果使用 var 定義變量 n，最后輸出的值就是 10。

塊級作用域的出現(xiàn)，實際上使得獲得廣泛應用的立即執(zhí)行匿名函數(shù)（IIFE）不再必要了。

// IIFE寫法
(function () {
  var tmp = ...;
  ...
}());

// 塊級作用域寫法
{
  let tmp = ...;
  ...
}

另外，ES6 也規(guī)定，函數(shù)本身的作用域，在其所在的塊級作用域之內。

function f() { console.log('I am outside!'); }
(function () {
  if(false) {
    // 重復聲明一次函數(shù)f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上面代碼在 ES5 中運行，會得到“I am inside!”，但是在 ES6 中運行，會得到“I am outside!”。這是因為 ES5 存在函數(shù)提升，不管會不會進入 if 代碼塊，函數(shù)聲明都會提升到當前作用域的頂部，得到執(zhí)行；而 ES6 支持塊級作用域，不管會不會進入 if 代碼塊，其內部聲明的函數(shù)皆不會影響到作用域的外部。

需要注意的是，如果在嚴格模式下，函數(shù)只能在頂層作用域和函數(shù)內聲明，其他情況（比如 if 代碼塊、循環(huán)代碼塊）的聲明都會報錯。

const 命令

const 也用來聲明變量，但是聲明的是常量。一旦聲明，常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3;
PI // 3.1415

const PI = 3.1;
PI // 3.1415

上面代碼表明改變常量的值是不起作用的。需要注意的是，對常量重新賦值不會報錯，只會默默地失敗。

const 的作用域與 let 命令相同：只在聲明所在的塊級作用域內有效。

if (true) {
  const MAX = 5;
}

// 常量 MAX 在此處不可得

const 命令也不存在提升，只能在聲明的位置后面使用。

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

上面代碼在常量 MAX 聲明之前就調用，結果報錯。

const 聲明的常量，也與 let 一樣不可重復聲明。

var message = "Hello!";
let age = 25;

// 以下兩行都會報錯
const message = "Goodbye!";
const age = 30;

由于 const 命令只是指向變量所在的地址，所以將一個對象聲明為常量必須非常小心。

const foo = {};
foo.prop = 123;

foo.prop
// 123

foo = {} // 不起作用

上面代碼中，常量 foo 儲存的是一個地址，這個地址指向一個對象。不可變的只是這個地址，即不能把 foo 指向另一個地址，但對象本身是可變的，所以依然可以為其添加新屬性。

下面是另一個例子。

const a = [];
a.push("Hello"); // 可執(zhí)行
a.length = 0;    // 可執(zhí)行
a = ["Dave"];    // 報錯

上面代碼中，常量 a 是一個數(shù)組，這個數(shù)組本身是可寫的，但是如果將另一個數(shù)組賦值給 a，就會報錯。

如果真的想將對象凍結，應該使用 Object.freeze 方法。

const foo = Object.freeze({});
foo.prop = 123; // 不起作用

上面代碼中，常量 foo 指向一個凍結的對象，所以添加新屬性不起作用。

除了將對象本身凍結，對象的屬性也應該凍結。下面是一個將對象徹底凍結的函數(shù)。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, value) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

全局對象的屬性

全局對象是最頂層的對象，在瀏覽器環(huán)境指的是 window 對象，在 Node.js 指的是 global 對象。在 JavaScript 語言中，所有全局變量都是全局對象的屬性。

ES6 規(guī)定，var 命令和 function 命令聲明的全局變量，屬于全局對象的屬性；let 命令、const 命令、class 命令聲明的全局變量，不屬于全局對象的屬性。

var a = 1;
// 如果在node環(huán)境，可以寫成global.a
// 或者采用通用方法，寫成this.a
window.a // 1

let b = 1;
window.b // undefined

上面代碼中，全局變量 a 由 var 命令聲明，所以它是全局對象的屬性；全局變量 b 由 let 命令聲明，所以它不是全局對象的屬性，返回 undefined。