ES6 => 語法糖 (Syntax Suger)

1. arguments 這個內建的區域變數 (用來存放函式的參數資料) 在箭頭函式不存在

     // 傳統函式
     let test1=function(msg){
       alert(msg);
     };
   
     等同
   
     // 傳統函式
     let test1=function(msg){
       alert(arguments[0]);
     };
   

     // 箭頭函式
     let test2=(msg)=>{
       alert(msg);
     };
   
     不能使用 arguments
   
     // 呼叫時是一樣的
     test1("傳統函式");
     test2("箭頭函式");
   

2. this: 函式的綁定物件: 箭頭函式沒有獨立的綁定物件, this 代表外層函式的綁定物件

   2-1 物件的方法, 不使用箭頭函式 (因為不方便)
   2-2 事件處理器, 綁定物件代表觸發事件的對象. 若是用箭頭函式, 就無此對應關係
   

     let obj={};
     obj.x=3;
     obj.test=function(){
       alert(this.x);
     };
     // 呼叫物件的方法
     obj.test();
   
     let obj={};
     obj.x=3;
     obj.test=()=>{
       // 1. 這是一個箭頭函式
       // 2. 這裡沒有綁定物件
       // 3. this 是什麼?
       // 4. this 就是外層的綁定物件
       // 5. 此範例外層物件為 window
       alert(this.x);
     };
     obj.test();
   
     結果 undefinded
   
     <button id="btn">Click</button>
   
     window.onload=function(){
       document.getElementById("btn").addEventListener("click", function(){
         alert(this); // 代表觸發事件的對象(就是按鈕)
         this.disabled=true;
       });
     };
   
     window.onload=function(){
       document.getElementById("btn").addEventListener("click", ()=>{
         this.disabled=true;
       });
     };
   
     this 會出問題 (原因同上, 箭頭函式沒有綁定的物件, this 會取得 window 物件)
   
     window.onload=function(){
       document.getElementById("btn").addEventListener("click", function(){
         window.setTimeout(function(){
           this.disabled=true;
         }, 2000);
       });
     };
   
     無效果, 因為裡面的 this 綁定在內層了
   
     window.onload=function(){
       document.getElementById("btn").addEventListener("click", function(){
         window.setTimeout(()=>{
           this.disabled=true;
         }, 2000);
       });
     };
   

3. constructor: 不能使用箭頭函式

   建構式(用來製造物件的函式)

   let Point=function(x, y){
   // this 代表新建立的物件
     this.x=x;
     this.y=y;
   };
   let p=new Point(3, 4);
   alert(p.x+","+p.y);
   
   let Point=(x, y)=>{
     this.x=x;
     this.y=y;
   };
   let p=new Point(3, 4);
   alert(p.x+","+p.y);
   
   產生錯誤
   

Ref:

• MDN - Arrow Function