tags: 鐵人賽 React javascript nodejs

鐵人賽第21天，今天依舊是個被老闆追殺的一天，坦白說忙到五點才結束。
罷特...今天的鐵人賽依舊要進行，走~咱們繼續衝～！

先來聊聊scope

• 從底下的例子來聊聊scope，我們在外部scope宣告個變數outside。
• 接著，宣告一個inside func，裡頭會去使用到一個變數outside，不過，func裡沒有outside這個變數，他會自動往外找，並建立連結
• 最後，我們呼叫inside()，呼叫完之後，順利顯示結果，也因為這個呼叫的inside()不會再被使用了，JS就會啟動回收機制。

let outside = 999;   //<-- 外部scope的變數               


function inside(){
  return outside+1;  //<-- 內部scope, 但內部找不到，會往外找
}

console.log(inside()) //1000, 完成後, js的垃圾回收機制啟動

什麼是閉包(closure)? 能吃嗎~?

• 對於閉包的解釋，我覺得Summer。桑莫。夏天 這篇定義的最簡短到位

• 先來個簡單的閉包範例

let a = 999

function doFunc(){
  let b = 1
  // 注意下面這個，return一個箭頭函示
  return ()=>{  
    let result = a+b;
    console.log("result is:"+result);
  }
}

let myFunc = doFunc(); //<-- 注意，myFunc接收的是doFunc回傳的一個箭頭函示
myFunc(); //<-- 因為接收的是一個箭頭函示，要啟動他執行{}花括號內的內容，必須要再多加一次()

• 看不懂！？沒關係，我畫了一個圖讓你理解
  

• 紅框框是一個回傳的箭頭函示，裡頭會用到:

1. 藍色scopre的a
2. 綠色scopre的b

• 也就是說，我們完整的取得了紅框框這個箭頭函示，這個函式很貼心的幫我們做好所有的變數連結，而且還不會回收喔!

哪要怎麼啟動回收啊??

• 很簡單，只要把變數設定為null即可，例如:

myFunc = null; //<-- JS: 請支援回收

來個實例好好感受一下閉包的好用之處

• 假設我們有一個函式world，開發到一半，我們發現需要在world func回傳的訊息前面，加上hello，這時，你就可以把閉包派上用場，就像幫他多做一層裝飾，讓它可以華麗登場。

let world=()=>"world";

function sayHello(aFunc){
  let result = 'hello-'+world(); 
  // do something more here...
  return ()=>result
}

let iSay = sayHello(world);
iSay(); //hello-world

結論

• 搞懂變數存在的scope(範疇)，其實閉包(closure)並不難，而且還可以幫助我們寫出更優雅的程式！
• 鐵人賽第21天，今天的我們依舊堅持自己的步調，為自己的頑固～喝采一下！！Rock~~~