天天看點

塊級作用域 -- 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() {};