ตอบสนองฟังก์ชั่นลูกศร ES6

ก่อน:

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

ด้วยฟังก์ชันลูกศร:

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

ฟังก์ชันลูกศรคืนค่าตามค่าเริ่มต้น:

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

ฟังก์ชั่นลูกศรพร้อมพารามิเตอร์:

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

ฟังก์ชั่นลูกศรไม่มีวงเล็บ:

hello = val => "Hello " + val;

ตัวอย่าง

ด้วยฟังก์ชันปกติthisแทนอ็อบเจ็กต์ที่เรียกใช้ฟังก์ชัน:

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);

ตัวอย่าง

ด้วยฟังก์ชันลูกศรthisแสดงถึงวัตถุ Header ไม่ว่าใครจะเรียกใช้ฟังก์ชัน:

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);