Fungsi Tanduk JavaScript
- Halaman Sebelumnya Kata Kunci this JS
- Halaman Berikutnya Kelas JS
Fungsi panah diperkenalkan di ES6.
Fungsi panah memungkinkan kita menulis fungsi yang lebih pendek:
Sintaksis
let myFunction = (a, b) => a * b;
Sebelumnya:
hello = function() { return "Hello World!"; }
Setelah menggunakan fungsi panah:
hello = () => { return "Hello World!"; }
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!";
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;
Sebenarnya, jika hanya ada satu parameter, Anda juga dapat melewatkan tanda kurung:
Fungsi panah tanpa tanda kurung:
hello = val => "Hello " + val;
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);
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);
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 |
- Halaman Sebelumnya Kata Kunci this JS
- Halaman Berikutnya Kelas JS