ES6之塊級作用域

為什麼需要塊級作用域？

ES5 隻有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。

第一種場景，内層變量可能會覆寫外層變量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined      

上面代碼的原意是，if代碼塊的外部使用外層的tmp變量，内部使用内層的tmp變量。但是，函數f執行後，輸出結果為undefined，原因在于變量提升，導緻内層的tmp變量覆寫了外層的tmp變量。

第二種場景，用來計數的循環變量洩露為全局變量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5      

上面代碼中，變量i隻用來控制循環，但是循環結束後，它并沒有消失，洩露成了全局變量。

ES6 的塊級作用域

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

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

上面的函數有兩個代碼塊，都聲明了變量n，運作後輸出5。這表示外層代碼塊不受内層代碼塊的影響。如果兩次都使用var定義變量n，最後輸出的值才是10。

ES6 允許塊級作用域的任意嵌套。

{{{{{let insane = 'Hello World'}}}}};      

上面代碼使用了一個五層的塊級作用域。外層作用域無法讀取内層作用域的變量。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 報錯
}}}};      

内層作用域可以定義外層作用域的同名變量。

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};      

塊級作用域的出現，實際上使得獲得廣泛應用的立即執行函數表達式（IIFE）不再必要了。

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

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

塊級作用域與函數聲明

函數能不能在塊級作用域之中聲明？這是一個相當令人混淆的問題。

ES5 規定，函數隻能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。

// 情況一
if (true) {
  function f() {}
}

// 情況二
try {
  function f() {}
} catch(e) {
  // ...
}      

上面兩種函數聲明，根據 ES5 的規定都是非法的。

但是，浏覽器沒有遵守這個規定，為了相容以前的舊代碼，還是支援在塊級作用域之中聲明函數，是以上面兩種情況實際都能運作，不會報錯。

ES6 引入了塊級作用域，明确允許在塊級作用域之中聲明函數。ES6 規定，塊級作用域之中，函數聲明語句的行為類似于let，在塊級作用域之外不可引用。

function f() { console.log('I am outside!'); }

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

  f();
}());      

上面代碼在 ES5 中運作，會得到“I am inside!”，因為在if内聲明的函數f會被提升到函數頭部，實際運作的代碼如下。

// ES5 環境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());      

ES6 就完全不一樣了，理論上會得到“I am outside!”。因為塊級作用域内聲明的函數類似于let，對作用域之外沒有影響。但是，如果你真的在 ES6 浏覽器中運作一下上面的代碼，是會報錯的，這是為什麼呢？

原來，如果改變了塊級作用域内聲明的函數的處理規則，顯然會對老代碼産生很大影響。為了減輕是以産生的不相容問題，ES6在附錄B裡面規定，浏覽器的實作可以不遵守上面的規定，有自己的行為方式。

允許在塊級作用域内聲明函數。

函數聲明類似于var，即會提升到全局作用域或函數作用域的頭部。

同時，函數聲明還會提升到所在的塊級作用域的頭部。

注意，上面三條規則隻對 ES6 的浏覽器實作有效，其他環境的實作不用遵守，還是将塊級作用域的函數聲明當作let處理。

根據這三條規則，在浏覽器的 ES6 環境中，塊級作用域内聲明的函數，行為類似于var聲明的變量。

// 浏覽器的 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      

上面的代碼在符合 ES6 的浏覽器中，都會報錯，因為實際運作的是下面的代碼。

// 浏覽器的 ES6 環境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function      

// 函數聲明語句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函數表達式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}      

// 不報錯
'use strict';
if (true) {
  function f() {}
}

// 報錯
'use strict';
if (true)
  function f() {}