iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

【這些年我似是非懂的 Javascript】系列 第 17

【這些年我似是非懂的 Javascript】Day 17 - 區塊的範疇

還記得昨天說的那句話

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

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

  • ES6 以前只能用 var 宣告變數,並只能透過函式來建造一個範疇泡泡。
    {
        var a = 3;
    }
    console.log(a); // 3  oh .. shit
    
  • ES6 之後,可以透過 constlet 來宣告以區塊為範疇的變數。
    {
        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..catchcatch 子句會以那個 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))


上一篇
【這些年我似是非懂的 Javascript】Day 16 - 函式的範疇
下一篇
【這些年我似是非懂的 Javascript】Day 18 - 拉升(Hoisting)
系列文
【這些年我似是非懂的 Javascript】34

尚未有邦友留言

立即登入留言