還記得昨天說的那句話

ES6 以前除了函式外沒有任何結構可以建立他們自己的範疇泡泡。

ES6 我們擁有了什麼造成這改變?

• ES6 以前只能用 var 宣告變數，並只能透過函式來建造一個範疇泡泡。

  {
      var a = 3;
  }
  console.log(a); // 3  oh .. shit
  

• ES6 之後，可以透過 const 和 let 來宣告以區塊為範疇的變數。

  {
      const a = 4;
      let b = 5;
  }
  console.log(a); // ReferenceError
  console.log(b); // ReferenceError
  

那以前沒有區塊作為範疇的變數會發生什麼事?
以滿常用的 for 來說

• ES6 以前，區塊以外還是可以存取到，但是我只會在 for 裡頭用到，卻污染了整個範疇。

  for(var i = 1; i < 10; i++){
      console.log(i);
  } // 1,2,3 ... 9
  console.log(i); // 10  oh shit 
  

• ES6 以後，再也不用擔心上面發生的事了。

  for(let i = 1; i < 10; i++){
      console.log(i);
  } // 1,2,3 ... 10
  console.log(i); // ReferenceError
  

Try/catch

JS 在 ES3 的規格有指出 try..catch 的 catch 子句會以那個 catch 區塊為範疇
如下面的範例

try{
    undefined();
}catch(err){
    console.log(err); // 抓得到
}
console.log(err); // ReferenceError

垃圾回收 (Garbage Collection)

區塊範疇除了上面之外還有另一個好處是可以將不需要一直留存的資料在處理後就直接回收該記憶體空間。
如下面範例

• 佔著記憶體但是我只需要做一次

  function foo(data) {
    // do something...
  }
  
  var someReallyBigData = { .. }; // 霸佔著資源
  
  foo(someReallyBigData);  // 霸佔著資源
  
  var btn = document.getElementById('boo_button');
  
  btn.addEventListener('click'), function clickHandler(e){
    console.log('Clicked button');
  });
  

• 解決上面的問題向 Engine 表示我不在需要他

  function foo(data) {
    // do something...
  }
  { 
  // 在這裡宣告的變數並且用完就丟掉資源
      let someReallyBigData = { .. }; 
  
      foo(someReallyBigData);  
  }
  var btn = document.getElementById('boo_button');
  
  btn.addEventListener('click'), function clickHandler(e){
    console.log('Clicked button');
  });
  

會有這樣的好處是有關於閉包(closure)的部分的範疇，這部分會在大概兩三天後應該會講到。

那~ 今天的分享就到此

感謝各位觀看
我想今天大家應該都在烤肉了吧 xDD
祝各位有個愉快的中秋節~

參考來源：

你所不知道的 JS｜範疇與 Closures，this 與物件原型 (You Don't Know JS: this & Object Prototypes))