Stan Blog

記錄學習到的東西

[JavaScript] 箭頭函式的細節

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:

Comments

comments powered by Disqus