塊級作用域 -- ECMAScript 6 學習

塊級作用域

• 為什麼需要塊級作用域？
• 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 = ; i < s.length; i++) {
  console.log(s[i]);
}

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

ES6 的塊級作用域

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

function f1() {
  let n = ;
  if (true) {
    let n = ;
  }
  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;
  };
}
// 另外，還有一個需要注意的地方。ES6 的塊級作用域允許聲明函數的規則，隻在使用大括号的情況下成立，如果沒有使用大括号，就會報錯。

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

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