Bereaksi Fungsi Panah ES6

Fungsi Panah

Fungsi panah memungkinkan kita untuk menulis sintaks fungsi yang lebih pendek:

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

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

Ini menjadi lebih pendek! Jika fungsi hanya memiliki satu pernyataan, dan pernyataan mengembalikan nilai, Anda dapat menghapus tanda kurung dan kata returnkunci:

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

Jika Anda memiliki parameter, Anda meneruskannya di dalam tanda kurung:

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

Bahkan, jika Anda hanya memiliki satu parameter, Anda juga dapat melewati tanda kurung:

hello = val => "Hello " + val;

Apa Tentang this?

Penanganannya thisjuga berbeda pada fungsi panah dibandingkan dengan fungsi biasa.

Singkatnya, dengan fungsi panah tidak ada pengikatan this.

Dalam fungsi biasa, thiskata kunci mewakili objek yang disebut fungsi, yang bisa berupa jendela, dokumen, tombol, atau apa pun.

Dengan fungsi panah, thiskata kunci selalu mewakili objek yang mendefinisikan fungsi panah.

Mari kita lihat dua contoh untuk memahami perbedaannya.

Kedua contoh memanggil metode dua kali, pertama saat halaman dimuat, dan sekali lagi saat pengguna mengklik tombol.

Contoh pertama menggunakan fungsi reguler, dan contoh kedua menggunakan fungsi panah.

Hasilnya menunjukkan bahwa contoh pertama mengembalikan dua objek yang berbeda (jendela dan tombol), dan contoh kedua mengembalikan objek Header dua kali.

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

Ingat perbedaan ini ketika Anda bekerja dengan fungsi. Terkadang perilaku fungsi reguler adalah yang Anda inginkan, jika tidak, gunakan fungsi panah.

hello =  "Hello World!";