React ES6 箭頭函式

箭頭函式

箭頭函式允許我們編寫更短的函式語法

hello = function() {
  return "Hello World!";
}

hello = () => {
  return "Hello World!";
}

它會更簡潔！如果函式只有一個語句，並且該語句返回一個值，則可以省略括號和 return 關鍵字

hello = () => "Hello World!";

如果你有引數，則將它們放在括號內

hello = (val) => "Hello " + val;

事實上，如果你只有一個引數，也可以省略括號

hello = val => "Hello " + val;

關於 this?

與常規函式相比，箭頭函式對 this 的處理方式也不同。

簡而言之，對於箭頭函式，沒有 this 的繫結。

在常規函式中，this 關鍵字代表呼叫函式的物件，可以是 window，document，一個按鈕或任何其他物件。

對於箭頭函式，this 關鍵字總是代表定義該箭頭函式的物件。

讓我們看兩個例子來理解其中的區別。

這兩個例子都呼叫了一個方法兩次，第一次是在頁面載入時，第二次是在使用者點選按鈕時。

第一個例子使用了一個常規函式，第二個例子使用了一個箭頭函式。

結果顯示第一個例子返回了兩個不同的物件（window 和 button），而第二個例子返回了兩次 Header 物件。

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

在處理函式時，請記住這些差異。有時常規函式的行為是你想要的，如果不是，則使用箭頭函式。