Fungsi Tanduk JavaScript

Fungsi panah diperkenalkan di ES6.

Fungsi panah memungkinkan kita menulis fungsi yang lebih pendek:

Sintaksis

let myFunction = (a, b) => a * b;

Coba Sendiri

Sebelumnya:

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

Coba Sendiri

Setelah menggunakan fungsi panah:

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

Coba Sendiri

Benar-benar pendek! Jika fungsi hanya memiliki satu pernyataan dan pernyataan tersebut mengembalikan nilai, dapat menghapus tanda kurung dan return Kata kunci:

Nilai balik fungsi panah secara default:

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

Coba Sendiri

Keterangan:Ini hanya berlaku jika fungsi hanya memiliki satu pernyataan.

Jika Anda memiliki parameter, kirimkannya ke dalam tanda kurung:

Fungsi panah dengan parameter:

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

Coba Sendiri

Sebenarnya, jika hanya ada satu parameter, Anda juga dapat melewatkan tanda kurung:

Fungsi panah tanpa tanda kurung:

hello = val => "Hello " + val;

Coba Sendiri

ini apa yang harus dilakukan?

Dibandingkan dengan fungsi biasa, fungsi panah terhadap ini Pemrosesan juga berbeda.

Dengan demikian, penggunaan fungsi panah tidak ada penanganan yang berbeda. ini dibindas.

Dalam fungsi biasa, kata kunci ini menunjukkan objek yang memanggil fungsi, dapatnya window, dokumen, tombol, atau apapun.

Untuk fungsi panah,ini Kata kunci selalu menunjukkan objek yang mendefinisikan fungsi panah.

Biarkan kita lihat dua contoh untuk memahami perbedaan di antaranya.

Kedua contoh ini memanggil metode dua kali, pertama saat halaman dimuat, kedua saat pengguna mengklik tombol.

Contoh pertama menggunakan fungsi biasa, sementara contoh kedua menggunakan fungsi panah.

Hasil menunjukkan bahwa contoh pertama kembalikan dua objek yang berbeda (window dan button), sementara contoh kedua kembalikan dua kali objek window, karena objek window adalah 'pemilik' fungsi.

contoh

Untuk fungsi biasa, this menunjukkan objek yang memanggil fungsi:

// fungsi biasa:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Panggil fungsi ini melalui objek window:
window.addEventListener("load", hello);
// Panggil fungsi ini melalui objek button:
document.getElementById("btn").addEventListener("click", hello);

Coba Sendiri

contoh

dengan menggunakan fungsi panah, maka ini Menunjukkan pemilik fungsi:

// Fungsi tanda panah:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Panggil fungsi ini melalui objek window:
window.addEventListener("load", hello);
// Panggil fungsi ini melalui objek button:
document.getElementById("btn").addEventListener("click", hello);

Coba Sendiri

Ingatkan perbezaan ini ketika menggunakan fungsi. Kadangkala, tingkah laku fungsi biasa adalah yang Anda inginkan, jika bukan, gunakan fungsi tanda panah.

Dukungan Browser

Tabel di bawah ini menunjukkan versi paling awal browser yang mendukung fungsi tanda panah JavaScript:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
September 2015 Juli 2015 Mei 2013 September 2016 September 2015