Fungsi Tanduk JavaScript

Rekomendasi kursus:

Fungsi panah diperkenalkan di ES6.

Fungsi panah memungkinkan kita menulis fungsi yang lebih pendek:

Syntax

Coba Sendiri

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

hello = function() {
  Setelah menggunakan fungsi panah:
}

Coba Sendiri

Sebelumnya:

hello = () => {
  Setelah menggunakan fungsi panah:
}

Coba Sendiri

return "Hello World!"; Benar-benar pendek! Jika fungsi hanya memiliki satu pernyataan dan pernyataan tersebut mengembalikan nilai, Anda dapat menghapus tanda kurung dan return

Kata kunci:

Nilai kembali default fungsi panah:

Coba Sendiri

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

Ini hanya berlaku jika fungsi hanya memiliki satu pernyataan.

Jika Anda memiliki parameter, kirimkannya ke dalam tanda kurung:

Fungsi panah dengan parameter:

Coba Sendiri

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

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

Fungsi panah tanpa tanda kurung:

Coba Sendiri

ini hello = val => "Hello " + val;

apa yang harus dilakukan? ini Penanganan yang berbeda terhadap

Secara singkat, menggunakan fungsi panah tidak ada penanganan yang berbeda. ini dibindas.

Dalam fungsi biasa, kata kunci ini menunjuk kepada objek yang memanggil fungsi, dapatnya jendela, dokumen, tombol, atau apa pun.

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

Mari lihat dua contoh untuk memahami perbedaan di antaranya.

Kedua contoh ini masing-masing dipanggil dua kali, pertama saat halaman dimuat, kedua kali saat pengguna menekan 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 menunjuk kepada objek yang memanggil fungsi:

// Fungsi biasa:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Pemanggilan fungsi oleh objek window:
window.addEventListener("load", hello);
// Pemanggilan fungsi oleh objek tombol:
document.getElementById("btn").addEventListener("click", hello);

Coba Sendiri

contoh

gunakan fungsi panah, maka ini Menunjukkan pemilik fungsi:

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

Coba Sendiri

Ingatkan perbedaan ini saat menggunakan fungsi. Kali-kali, perilaku fungsi konvensi adalah yang Anda inginkan, jika tidak, gunakan fungsi tanda panah.

Dukungan Browser

Tabel berikut menunjukkan versi browser yang mendukung penuh fungsi 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