# 箭頭函式運算式

## ==箭頭函式與舊式function的差異==

* 當我們運用箭頭函式時、最大的差異就在於==this==的作用域使用，箭頭函式中的==this==無法指向自己

    <a id="aLink1" href="javascript:;">Click1</a>
    <a id="aLink2" href="javascript:;">Click2</a>

    <script>
    //舊式函式
       document.getElementById("aLink1").addEventListener("click", function () {
          console.log(this);
        });
        
    //新式函式     
        document.getElementById("aLink2").addEventListener("click", () => {
          console.log(this);
        });
    </script>

* 舊式函式點擊後this顯示是Dom、新式箭頭this函式為全域

各點擊後 :

<div class="alert alert-success text-center" role="alert">
那箭頭函式怎麼用甚麼方式指向自己的Dom元素?
</div>

* 我們可以使用e.target傳送一個參數值來指定

 document.getElementById("aLink2").addEventListener("click", (e) => {
          console.log(e.target);
        });

log顯示 :

## ==箭頭函式常會遇到的寫法及問題==

* 如果透過不是變數指定的方式撰寫是無法改寫的

 //  變數指定方式
      const add = ()=> {
        console.log("add");
      }

      //  函式指定方式
      function remove() {
        
      }

<div class="alert alert-success text-center" >
箭頭函式自帶 return 的語法糖寫法
</div>

      const add = (a,b)=>{
        return a + b;
      }
      //語法糖寫法
      const addTo = (a, b) => a + b;

      //結果都會是一樣  
      console.log(addTo(1, 5));
          
      console.log(add(1,5));