Fungsi panah adalah salah satu pembaruan paling populer di Ecmascript 6. Ini memperkenalkan sintaks baru untuk mendefinisikan fungsi menggunakan "panah" (=>), itu ... itu bunkered ~. Perbedaan utama antara fungsi panah dan fungsi javascript tradisional adalah sebagai berikut:
1. Relevansi untuk ini. Nilai ini adalah built-in, tergantung di mana fungsi panah didefinisikan, bukan konteks di mana fungsi panah dijalankan.
2.NEW tidak tersedia. Fungsi panah tidak dapat menggunakan kata kunci baru untuk instantiate objek, jika tidak kesalahan akan dilaporkan.
3. Ini tidak berubah. Ini built-in untuk berfungsi dan konstan di seluruh lingkungan eksekusi dalam badan fungsi.
4. Tidak ada objek argumen. Parameter yang masuk tidak dapat diakses melalui objek Argumen. Ini hanya dapat dilakukan dengan menggunakan penamaan eksplisit atau fitur ES6 baru lainnya.
Keberadaan perbedaan ini masuk akal. Pertama, mengikat ini adalah salah satu sumber umum kesalahan JavaScript. Sangat mudah untuk kehilangan nilai fungsi built-in atau untuk mendapatkan hasil yang tidak terduga. Kedua, membatasi fungsi panah untuk menggunakan referensi yang diperbaiki ini kondusif untuk pemrosesan optimasi mesin JavaScript.
1. Sintaks
Sintaks fungsi panah sederhana, mendefinisikan variabel independen, maka panah dan tubuh fungsi. Variabel dan topik independen dapat digunakan dalam format yang lebih ringkas karena penggunaan yang berbeda. Contoh berikut adalah fungsi panah yang melewati parameter dan mengembalikan nilai.
Salinan kode adalah sebagai berikut:
var reflect = value => value;
// setara dengan:
var reflect = function (value) {
nilai pengembalian;
};
Dapat dilihat bahwa Anda bisa menulis parameter dengan melewatinya, tanpa menambahkan kurung. Panah menunjuk ke badan fungsi, tetapi tubuh fungsi hanyalah pernyataan pengembalian sederhana, jadi tidak perlu menambahkan kawat gigi. Setelah fungsi dibangun, ditugaskan untuk merefleksikan dan referensi.
Jika beberapa parameter perlu diteruskan, tanda kurung harus ditambahkan. Misalnya:
Salinan kode adalah sebagai berikut:
var sum = (num1, num2) => num1 + num2;
// setara dengan:
var sum = fungsi (num1, num2) {
mengembalikan num1 + num2;
};
Metode SUM () adalah menambahkan dua parameter dan meneruskan hasilnya kembali. Satu -satunya perbedaan dari contoh sebelumnya adalah bahwa dua parameter dilewatkan, sehingga mereka harus tertutup dalam kurung. Ini seperti fungsi tradisional, dengan koma dalam tanda kurung yang dipisahkan menjadi parameter. Demikian pula, jika fungsi tidak perlu lulus dalam parameter, itu juga harus diganti dengan tanda kurung kosong.
Salinan kode adalah sebagai berikut: var sum = () => 1 + 2;
// setara dengan:
var sum = function () {
mengembalikan 1 + 2;
};
Jika Anda ingin menggunakan badan fungsi standar, atau mungkin ada lebih banyak pernyataan untuk dieksekusi dalam badan fungsi, melampirkan tubuh fungsi dalam kawat gigi dan dengan jelas menentukan nilai pengembalian. Misalnya:
Salinan kode adalah sebagai berikut:
var sum = (num1, num2) => {return num1 + num2; }
// setara dengan:
var sum = fungsi (num1, num2) {
mengembalikan num1 + num2;
};
Bagian dalam kawat gigi pada dasarnya setara dengan fungsi tradisional, kecuali bahwa parameter argumen tidak tersedia.
Karena kawat gigi adalah logo tubuh fungsi. Jika fungsi panah ingin mengembalikan objek khusus, itu harus melampirkan objek dalam tanda kurung terlebih dahulu. Misalnya:
Salinan kode adalah sebagai berikut:
var getTempitem = id => ({
ya,
Nama: "Temp"
});
// setara dengan:
var getTempitem = function (id) {
kembali {
ya,
Nama: "Temp"
};
};
Seperti yang dapat dilihat dari contoh di atas, penggunaan tanda kurung untuk memasukkan kurung keriting adalah definisi objek, bukan tubuh fungsi.
2. Gunakan
Salah satu kesalahan paling umum dalam JavaScript adalah hubungan ini di dalam fungsi. Karena ini mengambil nilai sesuai dengan lingkungan eksekusi fungsi saat ini, ini akan menyebabkan kesalahpahaman saat menelepon, menghasilkan dampak pada objek lain yang tidak terkait. Lihat contoh berikut:
Salinan kode adalah sebagai berikut:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventListener ("klik", fungsi (event) {
this.dosomething (event.type); // kesalahan
}, PALSU);
},
dosomething: function (type) {
console.log ("menangani" + type + "untuk" + this.id);
}
};
Dalam kode ini, niat asli adalah untuk membiarkan metode PageHandler init () digunakan untuk membangun interaksi dan menyebutnya.dosomething () dalam fungsi klik event handler. Namun, kode tidak dieksekusi sesuai dengan niat desain asli. Pada saat runtime, ini menunjuk ke objek global alih -alih PageHandler, yang menyebabkan ini.
Tentu saja, Anda dapat menggunakan bind () dalam fungsi untuk secara eksplisit mengaitkannya dengan PageHandler, lihat di bawah:
Salinan kode adalah sebagai berikut:
var pageHandler = {
ID: "123456",
init: function () {
Document.addeventListener ("klik", (fungsi (acara) {
this.dosomething (event.type);
}). Bind (this), false);
},
dosomething: function (type) {
console.log ("menangani" + type + "untuk" + this.id);
}
};
Meskipun terlihat agak aneh, eksekusi kode sekarang sejalan dengan harapan. Dengan memanggil ikatan (ini) dari fungsi, fungsi baru yang telah dikaitkan dengan yang ada ini dibuat, yang berarti bahwa lapisan lain termasuk untuk mencapai tujuan.
Karena fungsi panah sudah mendukung asosiasi ini, akan lebih menyegarkan untuk menggunakan fungsi panah di sini. Lihat contoh berikut:
Salinan kode adalah sebagai berikut:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventlistener ("klik",
event => this.dosomething (event.type), false);
},
dosomething: function (type) {
console.log ("menangani" + type + "untuk" + this.id);
}
};
Fungsi penanganan acara dalam contoh ini memanggil fungsi panah this.dosomething (). Nilai dari ini adalah nilai init ini (). Oleh karena itu, setara dengan mengikat ().
Sifat ringkas dan ringkas dari fungsi panah juga menjadikannya pilihan ideal untuk variabel independen fungsi lainnya. Misalnya, untuk menggunakan pembanding khusus untuk mengatur array pada ES5, lihat kode khas di bawah ini:
Salinan kode adalah sebagai berikut:
var result = values.sort (function (a, b) {
mengembalikan a - b;
});
Contoh di atas menggunakan banyak sintaks untuk mengimplementasikan operasi sederhana. Jika Anda menggunakan fungsi panah, Anda dapat menulis kode yang sangat halus:
Salinan kode adalah sebagai berikut:
var result = values.sort ((a, b) => a - b);
Sort/peta/reduksi metode array mendukung fungsi panggilan balik. Menggunakan fungsi panah dapat menyederhanakan proses penulisan dan membebaskan tangan Anda untuk melakukan apa yang Anda inginkan.
3. Suplemen
Fungsi panah memang berbeda dari fungsi tradisional, tetapi mereka masih memiliki karakteristik umum. Misalnya:
1. Jenis operasi pada fungsi panah akan mengembalikan "fungsi".
2. Fungsi panah masih merupakan instance fungsi, sehingga metode eksekusi instanceof konsisten dengan fungsi tradisional.
3.call/apply/Bind Metode masih berlaku untuk fungsi panah, tetapi bahkan jika metode ini dipanggil untuk memperluas ruang lingkup saat ini, ini tidak akan berubah.
Perbedaan terbesar antara fungsi panah dan fungsi tradisional adalah bahwa operasi baru dinonaktifkan.
4. Kesimpulan
Fungsi panah adalah fitur baru dari ECMASCRIPT 6 yang telah menarik banyak perhatian dan terus -menerus dioptimalkan. Ini adalah tren umum untuk menggunakan tata bahasa singkat untuk menentukan proses fungsi penulisan atau pernyataan, dan mereka pasti akan tak terkalahkan dan tidak ada yang bisa menghentikannya. Hubungannya dengan kata kunci ini membuat pengembang tidak lagi mengganggu dan mengoptimalkannya untuk meningkatkan kinerja melalui JavaScript Engine. Berbicara tentang ini, teman -teman saya sudah haus. Jika Anda ingin mencoba fungsi panah, cukup buka versi terbaru Firefox.