ES6 塊級做用域解決的一些問題

ES6 塊級做用域解決的一些問題

博客說明

文章所涉及的資料來自互聯網整理和我的總結，意在於我的學習和經驗彙總，若有什麼地方侵權，請聯繫本人刪除，謝謝！

簡介

在ES5中沒有塊級做用域，這出現了許多的問題，ES6中新增了塊級做用域

問題一：內層變量覆蓋外層變量

因爲使用var聲明的變量，存在變量提高，在內層的tmp會覆蓋掉外層的tmp變量

var tmp = 'hahaha';

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

f(); // undefined

問題二：在for循環中的循環變量泄漏爲全局變量

在使用for循環時，i變量在循環結束以後並無回收，而是泄漏成了全局變量

var s = 'hahaha';

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

console.log(i); // 6

ES6的塊級別做用域

let和const爲JavaScript新增了塊級做用域

在同一個塊級裏面，外層代碼塊不受內層代碼塊的影響

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

函數聲明

ES5 規定，函數只能在頂層做用域和函數做用域之中聲明，不能在塊級做用域聲明。可是，瀏覽器沒有遵照這個規定，爲了兼容之前的舊代碼，仍是支持在塊級做用域之中聲明函數，所以上面兩種狀況實際都能運行，不會報錯。

像如下的代碼，在ES5中是非法的，可是在瀏覽器中不會報錯的

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

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

雖然不報錯，可是ES6仍是解決了這個問題，ES6 引入了塊級做用域，明確容許在塊級做用域之中聲明函數。

ES6 規定，塊級做用域之中，函數聲明語句的行爲相似於let，在塊級做用域以外不可引用。

可是這樣改動對老代碼十分不友好，爲了減輕所以產生的不兼容問題，ES6 在附錄 B裏面規定，瀏覽器的實現能夠不遵照上面的規定，有本身的行爲方式。

• 容許在塊級做用域內聲明函數。
• 函數聲明相似於var，即會提高到全局做用域或函數做用域的頭部。
• 同時，函數聲明還會提高到所在的塊級做用域的頭部。

注意，上面三條規則只對 ES6 的瀏覽器實現有效，其餘環境的實現不用遵照，仍是將塊級做用域的函數聲明看成let處理。

函數表達式和函數聲明

考慮到環境致使的行爲差別太大，應該避免在塊級做用域內聲明函數。若是確實須要，也應該寫成函數表達式，而不是函數聲明語句。

// 塊級做用域內部的函數聲明語句，建議不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 塊級做用域內部，優先使用函數表達式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

做用域的標識

ES6 的塊級做用域必須有大括號，也就是標識，若是沒有大括號，JavaScript 引擎就認爲不存在塊級做用域。

if (true) let x = 1;  // 報錯


if (true) {
  let x = 1;
}
// 不報錯

感謝

萬能的網絡

菜鳥教程

阮一峯的es6語法教程

以及勤勞的本身，我的博客，GitHub