Pemrograman & Scripting

Cara menggunakan fungsi panah di javascript

Cara menggunakan fungsi panah di javascript

Sintaks fungsi panah diperkenalkan dengan ecmascript6: dengan menggunakan sintaks baru ini, dalam beberapa kasus (tetapi tidak semua), kami dapat menghasilkan lebih banyak kode ringkas dan dapat dibaca, terutama ketika fungsi kami hanya berisi satu ekspresi. Dalam tutorial ini kita akan melihat bagaimana kita dapat mendefinisikan fungsi panah, apa perbedaan dengan fungsi standar dan apa saja kasus di mana penggunaan fungsi panah tidak tepat.

Dalam tutorial ini Anda akan belajar:

  • Apa itu fungsi panah.
  • Bagaimana fungsi panah didefinisikan.
  • Perbedaan antara fungsi panah dan fungsi standar.
  • Kasus -kasus di mana fungsi panah tidak dapat digunakan.

Persyaratan Perangkat Lunak dan Konvensi Baris Perintah Linux
Kategori Persyaratan, konvensi atau versi perangkat lunak yang digunakan
Sistem Sistem Operasi Agnostik.
Perangkat lunak Pemasangan node untuk mengikuti tutorial ini di lingkungan non-browser.
Lainnya Pengetahuan tentang konsep berorientasi javascript dan objek.
Konvensi # - mensyaratkan perintah linux yang diberikan untuk dieksekusi dengan hak istimewa root baik secara langsung sebagai pengguna root atau dengan menggunakan sudo memerintah
$ - mensyaratkan perintah Linux yang diberikan untuk dieksekusi sebagai pengguna biasa

Apa itu "fungsi panah"?

Fungsi panah diperkenalkan dengan ecmascript6: dengan menggunakan sintaks baru ini kita sering dapat memperoleh lebih banyak kode ringkas, dalam beberapa kasus menerjemahkan panggilan balik multi-line ke satu kalimat, berkat fitur seperti pengembalian implisit. Karena kekhasannya, fungsi panah tidak dapat menggantikan fungsi standar di mana -mana: ada beberapa konteks di mana kita tidak dapat menggunakannya, dan kita akan mengerti alasannya.

Dari fungsi standar hingga fungsi panah

Dalam paragraf ini kita akan melihat contoh bagaimana kita dapat mengganti fungsi standar dengan fungsi panah: kita akan menggunakan callback fungsi pesanan lebih tinggi sebagai contoh sempurna saat melakukan substitusi seperti itu benar -benar baik -baik saja.

Seperti yang pasti Anda ketahui, an fungsi urutan yang lebih tinggi adalah fungsi yang mengembalikan fungsi lain, atau menerima fungsi lain sebagai argumen. Dalam contoh ini kita akan menggunakan Saring, atau Himpunan.prototipe.Saring jika kamu suka. Metode ini objek array, mengambil fungsi sebagai argumennya, dan mengembalikan array baru, dihuni oleh semua elemen array asli yang positif untuk tes yang diterapkan di dalam fungsi callback.

Mari kita lihat contoh menggunakan filter dengan fungsi klasik. Bayangkan kita memiliki serangkaian objek, Masing -masing mewakili karakter dari buku "Lord of the Rings":

const karakter = [name: 'frodo', ras: 'hobbit', name: 'sam', ras: 'hobbit', name: 'legolas', ras: 'elf', name: ' Aragorn ', ras:' man ', name:' boromir ', ras:' man ']
Menyalin

Itu karakter Array berisi 5 elemen; Masing -masing memiliki dua properti: nama Dan balapan. Sekarang, misalkan kita ingin membuat array baru yang dihuni hanya oleh karakter yang termasuk dalam ras pria. Menggunakan filter dan sintaks fungsi standar, kami menulis:

const pria = karakter.filter (fungsi filtermen (elemen) return elemen.balapan == 'man'; );
Menyalin

Seperti dikatakan di atas, Saring, mengambil fungsi sebagai argumen: saat menggunakan sintaks standar, fungsi ini dapat dinamai atau anonim. Dalam kebanyakan situasi, fungsi anonim digunakan sebagai panggilan balik, tetapi demi contoh ini, dan kemudian menyoroti salah satu perbedaan antara sintaks fungsi standar dan panah, kami memberikan nama pada fungsi kami: filtermen.

Fungsi panggilan balik untuk digunakan Saring, hanya membutuhkan satu wajib parameter, yang merupakan elemen dari array asli yang sedang diproses setiap kali. Jika fungsinya kembali BENAR, Elemen dimasukkan sebagai anggota array baru, jika fungsi kembali PALSU elemennya tidak. Dalam kasus khusus ini, kami mendefinisikan tes sederhana:

karakter.balapan == 'man'
Menyalin

Tes ini kembali BENAR Jika balapanProperti elemen yang sedang diproses, sama dengan 'pria' string. Inilah hasil dari apa yang kami tulis di atas:

[name: 'aragorn', ras: "man ', name:' boromir ', ras:" man']
Menyalin

Sekarang, misalkan kita ingin refactor kode di atas dengan menggunakan fungsi panah. Kami akan menulis:

const pria = karakter.filter (elemen => elemen.ras == 'man');
Menyalin

Dengan menggunakan fungsi panah Sintaks, kami telah dapat mencapai hasil yang sama dari contoh sebelumnya hanya dengan satu baris kode: seberapa bagus itu?!. Jangan khawatir jika pada pandangan pertama sintaks baru membingungkan Anda, lanjutkan membaca.

Sintaks fungsi panah

Sementara kami mendefinisikan fungsi standar dengan menggunakan fungsi kata kunci, fungsi panah ditentukan dengan menggunakan => simbol. Ini, jelas, bukan satu -satunya perbedaan antara keduanya: salah satu yang paling penting yang harus kita soroti di sini adalah bahwa sementara fungsi klasik, dalam ekspresi fungsi, dapat dinamai atau anonim, fungsi panah selalu anonim.

Mendefinisikan argumen dalam fungsi panah

Dalam contoh sebelumnya, karena kita menyingkirkan fungsi kata kunci, hal pertama yang bisa kita baca adalah elemen, yang merupakan argumen yang diterima oleh fungsi panah. Aturan yang harus diikuti ketika mendefinisikan argumen yang diharapkan oleh fungsi panah sederhana: jika fungsi menerima banyak argumen, atau tidak ada argumen sama sekali, kita harus melampirkannya di antara tanda kurung; Jika fungsi hanya berisi satu argumen, seperti halnya dalam contoh kami, kami dapat menghilangkan tanda kurung sepenuhnya.

Sebagai contoh, bayangkan kita ingin mendefinisikan fungsi yang mengembalikan produk dari dua angka yang disahkan sebagai argumennya. Kami akan menulis:

// Karena fungsi mengambil dua parameter, kita harus menggunakan kurung const multiply = (a, b) => a * b;
Menyalin

Kembalinya implisit dan kawat gigi keriting

Dalam semua contoh di atas, Anda mungkin memperhatikan tidak adanya hal lain: kurung kurawal yang membatasi tubuh fungsi. Mengapa kami menghilangkannya? Jika tubuh fungsi panah hanya terdiri dari satu ekspresi, kawat gigi keriting dapat dihilangkan: jika terjadi, hasil dari ekspresi secara implisit dikembalikan:

// Jika kita menghilangkan braces keriting hasil ekspresi secara implisit dikembalikan const Multiply = (a, b) => a * b; gandakan (2,3); 6 // Hasilnya adalah 6: secara implisit dikembalikan // Jika kita menggunakan kawat gigi keriting, hasilnya tidak secara implisit dikembalikan const Multiply = (a, b) => a * b multiply (2,3); tidak terdefinisi // Hasilnya tidak akan ditentukan, karena kami tidak secara eksplisit mengembalikan hasil ekspresi
Menyalin

Dalam kode di atas kami mendefinisikan fungsi yang sangat sederhana, berkembang biak: Fungsi ini mengharapkan dua parameter, oleh karena itu kita harus melampirkannya di antara tanda kurung. Itu => Simbol mendefinisikan fungsi panah. Dalam contoh pertama, karena kita hanya memiliki satu ekspresi, yang mengembalikan produk dari dua angka yang dilewati sebagai parameter, kita dapat menghilangkan kawat gigi keriting dan memanfaatkan fitur pengembalian implisit.

Dalam contoh kedua kami menggunakan kawat gigi keriting, oleh karena itu fungsi dikembalikan belum diartikan, Karena kami tidak memiliki pengembalian implisit: untuk mendapatkan hasil yang diharapkan yang seharusnya kami gunakan kembali secara eksplisit.

Beberapa pernyataan atau ekspresi dalam badan fungsi

Kawat gigi keriting juga merupakan satu -satunya cara kita dapat menentukan beberapa pernyataan atau ekspresi di dalam fungsi panah. Misalnya, misalkan bahwa alih -alih mengembalikan produk dari dua angka, kami ingin fungsi kami menampilkan string, menampilkannya:

const multiply = (a, b) => const produk = a*b; menghibur.log ('produk $ a dan $ b adalah $ produk');  multipel (2,3); Produk 2 dan 3 adalah 6
Menyalin

Bagaimana jika fungsi panah kita harus mengembalikan objek secara literal, yang dibatasi oleh kawat gigi keriting? Dalam hal ini, kita harus melampirkan objek secara literal antara tanda kurung:

const createChar = (karaktername, karakterrace) => (name: karaktername, ras: karakterrace); createChar ('gimli', 'dwarf') name: "gimli ', ras:" dwarf'
Menyalin

Bagaimana ini berperilaku di dalam fungsi panah

Salah satu yang paling relevan, jika bukan perbedaan yang paling relevan antara fungsi klasik dan fungsi panah adalah bagaimana ini Pekerjaan. Perbedaan ini adalah alasan utama mengapa dalam beberapa kasus kita tidak dapat menggunakan fungsi panah, seperti yang akan kita lihat segera. Sebelum menyoroti perbedaan, Ayo rekap bagaimana ini Bekerja saat digunakan dalam fungsi standar. Hal pertama yang perlu diingat adalah, nilai ini ditentukan oleh bagaimana fungsi itu sendiri disebut, mari kita lihat beberapa contoh.

Default: ini adalah referensi ke ruang lingkup global

Kapan ini digunakan di dalam fungsi mandiri, dan kami tidak bekerja mode ketat, itu adalah referensi ruang lingkup global, yang merupakan jendela objek di lingkungan browser, atau objek global di simpul.JS. Dalam situasi yang sama, tetapi dalam mode yang ketat, ini akan belum diartikan Dan kami akan menerima kesalahan:

var i = 20; // Di sini kami menggunakan var bukannya dibiarkan karena yang terakhir tidak membuat properti di ruang lingkup global. fungsi foo () konsol.log (ini.Saya);  // mode non-strict foo () 20 // mode ketat foo () typeError: tidak dapat membaca properti 'i' dari tidak terdefinisi
Menyalin

Ikatan implisit

Ketika fungsi standar dirujuk di dalam suatu objek, dan fungsi itu disebut dengan objek itu sebagai a konteks, Menggunakan notasi titik, ini menjadi referensi ke objek itu. Ini adalah apa yang kita sebut Ikatan implisit:

fungsi foo () konsol.log (ini.Saya);  biarkan objek = i: 20, foo: foo // properti foo adalah referensi ke objek foo function.foo () // ini adalah referensi ke objek, jadi ini.Saya adalah objek.I 20
Menyalin

Ikatan Eksplisit

Kami mengatakan bahwa kami menggunakan Ikatan Eksplisit Ketika kita secara eksplisit menyatakan apa ini harus referensi. Itu dapat dicapai dengan menggunakan panggilan, menerapkan atau mengikat Metode suatu fungsi (yang dalam JavaScript sendiri merupakan objek kelas satu. Ingat kasus pertama yang kami sebutkan di atas, ketika ikatan default berlaku:

var i = 20; fungsi foo () konsol.log (ini.Saya);  const object = i: 100 foo () // Ini akan menghasilkan 20 atau menghasilkan typeError dalam mode ketat. // Jika kita secara eksplisit mengatur ini untuk menjadi referensi ke objek hal -hal berubah. // Hubungi dan Terapkan Jalankan Fungsi Segera dengan Konteks Baru: FOO.Panggilan (objek) // Output adalah 100 foo.Terapkan (objek) // Output adalah 100 // BIND sebagai gantinya, mengembalikan fungsi baru dengan konteks yang ditentukan. Biarkan BoundFoo = foo.BIND (Object) BoundFoo () // Output adalah 100
Menyalin

Ada beberapa perbedaan antara panggilan, menerapkan Dan mengikat: yang relevan adalah bahwa yang terakhir mengembalikan a fungsi baru Terikat pada konteks yang ditentukan, sedangkan dengan dua lainnya, fungsi, terikat pada konteks yang ditentukan, segera dieksekusi. Ada perbedaan lain, tetapi kami tidak akan melihatnya di sini. Yang penting adalah memahami bagaimana mengikat secara eksplisit bekerja.

Bagaimana fungsi panah berbeda ini pandangan?

Dalam semua kasus dan contoh di atas, kami melihat bagaimana, saat menggunakan fungsi standar, nilai ini Tergantung pada bagaimana fungsinya disebut. Fungsi panah, sebagai gantinya, gunakan leksikal ini: Mereka tidak memiliki milik mereka sendiri ini, tetapi selalu gunakan ini dari ruang lingkup tertutup. Contoh khas di mana ini dapat menghasilkan efek yang tidak terduga adalah pada pendengar acara. Misalkan kita memiliki tombol dengan ID "Button1", dan kami ingin mengubah teksnya saat diklik:

Klik saya! // Pendengar acara dengan fungsi standar sebagai dokumen panggilan balik.getElementById ('button1').addeventListener ('click', function () this.innertext = "diklik!";)
Menyalin

Kode berfungsi dengan sempurna, dan setelah tombol diklik, teksnya berubah seperti yang diharapkan. Bagaimana jika kita menggunakan fungsi panah dalam kasus ini? Misalkan kita menulisnya seperti ini:

dokumen.getElementById ('button1').addeventListener ('klik', () => ini.innertext = "diklik!";)
Menyalin

Kode di atas tidak berfungsi, mengapa? Mudah: Karena, seperti yang kami katakan sebelumnya, saat dalam contoh pertama, ini Di dalam fungsi callback standar referensi objek tempat peristiwa terjadi (tombol), saat kami menggunakan fungsi panah ini diwarisi dari ruang lingkup induk, yang dalam hal ini adalah jendela obyek. Demi kelengkapan, kita harus mengatakan bahwa contoh di atas dapat dengan mudah diperbaiki untuk bekerja dengan fungsi panah:

dokumen.getElementById ('button1').addeventListener ('klik', event => event.target.innertext = "diklik!";)
Menyalin

Kali ini kode berfungsi karena kami tidak menggunakan ini untuk merujuk tombol, tetapi kami membiarkan fungsi kami menerima satu argumen, yaitu peristiwa. Di badan fungsi yang kami gunakan peristiwa.target untuk merujuk objek yang mengirim acara.

Untuk alasan yang sama yang kami sebutkan di atas, fungsi panah tidak dapat digunakan sebagai metode objek atau metode prototipe:

// fungsi panah tidak berfungsi sebagai metode objek ... const object1 = i: 1000, foo: () => konsol.log ('nilai i adalah $ ini.i ') objek1.foo () nilai i tidak ditentukan // ... dan mereka tidak berfungsi sebagai metode prototipe. const person = fungsi (nama, usia) ini.name = name; ini.usia = usia;  Orang.prototipe.memperkenalkan = () => konsol.log ('nama saya adalah $ ini.nama dan saya $ ini.usia tahun '); const jack = orang baru ('jack', 100); mendongkrak.Nama 'Jack' Jack.Usia 100 Jack.memperkenalkan () nama saya tidak ditentukan dan saya tidak ditentukan bertahun -tahun
Menyalin

Kesimpulan

Sintaks fungsi panah adalah fitur yang sangat bagus yang diperkenalkan dengan ecmascript6. Dengan cara baru untuk mendefinisikan fungsi, kita dapat menulis kode yang lebih pendek dan lebih bersih. Kami melihat cara mendefinisikan fungsi panah, dan bagaimana sintaks baru bekerja.

Kami juga melihat mengapa fungsi panah tidak dapat menggantikan fungsi standar dalam segala keadaan, karena mereka tidak memiliki milik mereka sendiri ini, dan menggunakan salah satu ruang lingkup tertutup: ini, seperti yang kita lihat dalam tutorial ini, membuat mereka tidak dapat digunakan sebagai metode atau konstruktor. Jika Anda tertarik dengan tutorial JavaScript lainnya, tunggu saja: Di tutorial berikutnya kita akan berbicara tentang mengambil, fungsi. Sementara itu, Anda dapat memeriksa artikel kami tentang janji.

Tutorial Linux Terkait:

  • Lanjutan regex bash canggih dengan contoh
  • Pengantar JavaScript Loops
  • Pengantar Otomatisasi Linux, Alat dan Teknik
  • Menguasai loop skrip bash
  • Hal -hal yang harus diinstal pada ubuntu 20.04
  • Loop bersarang dalam skrip bash
  • Bash Regexps untuk pemula dengan contoh
  • Mint 20: Lebih baik dari Ubuntu dan Microsoft Windows?
  • Tutorial debugging GDB untuk pemula
  • Buat redirect dan tulis ulang aturan ke .htaccess di Apache…