Pengaturcaraan & skrip

Cara menggunakan fungsi anak panah dalam javascript

Cara menggunakan fungsi anak panah dalam javascript

Sintaks fungsi anak panah diperkenalkan dengan ecmascript6: dengan menggunakan sintaks baru ini, dalam beberapa (tetapi tidak semua) kes, kita dapat menghasilkan lebih banyak kod ringkas dan mudah dibaca, terutama apabila fungsi kami hanya mengandungi satu ungkapan. Dalam tutorial ini kita akan melihat bagaimana kita dapat menentukan fungsi anak panah, apakah perbezaan dengan fungsi standard dan apakah kes -kes di mana penggunaan fungsi anak panah tidak sesuai.

Dalam tutorial ini anda akan belajar:

  • Apakah fungsi anak panah.
  • Bagaimana fungsi anak panah ditakrifkan.
  • Perbezaan antara fungsi anak panah dan fungsi standard.
  • Kes di mana fungsi anak panah tidak dapat digunakan.

Keperluan Perisian dan Konvensyen Talian Perintah Linux
Kategori Keperluan, konvensyen atau versi perisian yang digunakan
Sistem Sistem operasi agnostik.
Perisian Pemasangan nod untuk mengikuti tutorial ini dalam persekitaran bukan pelayar.
Yang lain Pengetahuan mengenai konsep JavaScript dan Objek Berorientasikan.
Konvensyen # - Memerlukan arahan Linux yang diberikan untuk dilaksanakan dengan keistimewaan akar sama ada secara langsung sebagai pengguna root atau dengan menggunakan sudo perintah
$ - Memerlukan arahan Linux yang diberikan sebagai pengguna yang tidak layak

Apa itu "fungsi anak panah"?

Fungsi anak panah diperkenalkan dengan ecmascript6: dengan menggunakan sintaks baru ini, kita sering dapat memperoleh lebih banyak kod ringkas, dalam beberapa kes menerjemahkan panggilan balik multi-line ke satu lapisan, terima kasih kepada ciri-ciri seperti pulangan tersirat. Kerana keanehannya, bagaimanapun, fungsi anak panah tidak dapat menggantikan fungsi standard di mana -mana: terdapat beberapa konteks di mana kita tidak dapat menggunakannya, dan kita akan melihat mengapa.

Dari fungsi standard ke fungsi anak panah

Dalam perenggan ini kita akan melihat contoh bagaimana kita dapat menggantikan fungsi standard dengan fungsi anak panah: kita akan menggunakan panggilan balik fungsi pesanan yang lebih tinggi sebagai contoh yang sempurna ketika melakukan penggantian sedemikian benar -benar baik.

Seperti yang anda ketahui, an fungsi pesanan yang lebih tinggi adalah fungsi yang mengembalikan fungsi lain, atau menerima fungsi lain sebagai hujah. Dalam contoh ini kita akan menggunakan penapis, atau array.prototaip.penapis jika kamu suka. Kaedah ini objek array, mengambil fungsi sebagai hujahnya, dan mengembalikan array baru, dihuni oleh semua elemen array asal yang positif kepada ujian yang dilaksanakan di dalam fungsi panggil balik.

Mari lihat contoh menggunakan penapis dengan fungsi klasik. Bayangkan kita mempunyai pelbagai objek, Setiap daripada mereka mewakili watak dari buku "Lord of the Rings":

const conters = [name: 'Frodo', Race: 'Hobbit', name: 'Sam', Race: 'Hobbit', name: 'Legolas', Race: 'Elf', name: ' Aragorn ', bangsa:' man ', name:' boromir ', bangsa:' man ']
Salinan

The watak Array mengandungi 5 elemen; Setiap daripada mereka mempunyai dua sifat: nama dan perlumbaan. Sekarang, katakan kita ingin membuat array baru yang dihuni hanya oleh watak -watak yang dimiliki oleh perlumbaan lelaki. Menggunakan penapis dan sintaks fungsi standard, kami menulis:

Const Men = watak.penapis (fungsi penapis (elemen) return element.bangsa == 'man'; );
Salinan

Seperti yang dikatakan sebelum ini, penapis, mengambil fungsi sebagai hujah: Apabila menggunakan sintaks standard, fungsi ini boleh dinamakan atau tanpa nama. Dalam kebanyakan situasi fungsi tanpa nama digunakan sebagai panggilan balik, tetapi demi contoh ini, dan kemudian menyerlahkan salah satu perbezaan antara sintaks fungsi standard dan anak panah, kami memberikan nama kepada fungsi kami: penapis.

Fungsi panggil balik yang akan digunakan penapis, hanya mengambil satu wajib parameter, yang merupakan elemen array asal yang sedang diproses setiap kali. Sekiranya fungsi kembali Benar, Elemen dimasukkan sebagai ahli array baru, jika fungsi kembali salah elemen tidak. Dalam kes ini, kami menentukan ujian mudah:

watak.Perlumbaan == 'Man'
Salinan

Ujian ini kembali Benar jika perlumbaanharta elemen yang sedang diproses, sama dengan rentetan 'lelaki'. Inilah hasil dari apa yang kami tulis di atas:

[name: 'aragorn', bangsa: "man ', name:' boromir ', bangsa:" man']
Salinan

Sekarang, katakan kami ingin refactor kod di atas dengan menggunakan fungsi anak panah. Kami akan menulis:

Const Men = watak.penapis (elemen => elemen.bangsa == 'lelaki');
Salinan

Dengan menggunakan Fungsi anak panah sintaks, kami dapat mencapai hasil yang sama dari contoh sebelumnya dengan hanya satu baris kod: betapa baiknya itu?!. Jangan risau jika pada pandangan pertama sintaks baru membingungkan anda, teruskan membaca.

Sintaks fungsi anak panah

Walaupun kita menentukan fungsi standard dengan menggunakan fungsi kata kunci, fungsi anak panah ditakrifkan dengan menggunakan => simbol. Ini, jelasnya, bukan satu -satunya perbezaan antara kedua -dua: salah satu yang paling penting yang harus kita sorot di sini ialah walaupun fungsi klasik, dalam ekspresi fungsi, boleh dinamakan atau tanpa nama, fungsi anak panah selalu tidak dikenali.

Menentukan hujah dalam fungsi anak panah

Dalam contoh sebelumnya, kerana kita menghilangkan fungsi kata kunci, perkara pertama yang dapat kita baca adalah elemen, yang merupakan hujah yang diterima oleh fungsi anak panah. Peraturan yang perlu diikuti apabila menentukan hujah -hujah yang dijangkakan oleh fungsi anak panah adalah mudah: jika fungsi menerima pelbagai argumen, atau tidak ada argumen sama sekali, kita mesti melampirkannya antara kurungan; Sekiranya fungsi itu hanya mengandungi satu hujah, seperti yang berlaku dalam contoh kita, kita dapat menghilangkan kurungan sepenuhnya.

Sebagai contoh, bayangkan kita ingin menentukan fungsi yang mengembalikan produk dua nombor yang diluluskan sebagai hujahnya. Kami akan menulis:

// Oleh kerana fungsi mengambil dua parameter, kita mesti menggunakan kurungan constly multiply = (a, b) => a * b;
Salinan

Pulangan tersirat dan pendakap keriting

Dalam semua contoh di atas, anda mungkin dapat melihat ketiadaan perkara lain: pendakap keriting yang membatalkan badan fungsi. Mengapa kita menghilangkannya? Jika badan fungsi anak panah terdiri daripada hanya satu ungkapan, pendakap keriting boleh ditinggalkan: jika ia berlaku, hasil ungkapan itu secara tersirat dikembalikan:

// Jika kita menghilangkan keriting, hasil ekspresi secara tersirat dikembalikan constly = (a, b) => a * b; Multiply (2,3); 6 // Keputusan adalah 6: ia secara tersirat dikembalikan // Jika kita menggunakan pendakap keriting, hasilnya tidak secara tersirat dikembalikan constly = (a, b) => a * b Multiply (2,3); Hasil yang tidak ditentukan // tidak akan ditentukan, kerana kami tidak mengembalikan hasil ekspresi
Salinan

Dalam kod di atas kita menentukan fungsi yang sangat mudah, kalikan: Fungsi ini mengharapkan dua parameter, oleh itu kita mesti melampirkannya antara kurungan. The => simbol mentakrifkan fungsi anak panah. Dalam contoh pertama, kerana kita hanya mempunyai satu ungkapan, yang mengembalikan produk kedua -dua nombor yang diluluskan sebagai parameter, kita dapat menghilangkan pendakap keriting dan memanfaatkan ciri pulangan tersirat.

Dalam contoh kedua kami menggunakan pendakap keriting, oleh itu fungsi itu dikembalikan tidak ditentukan, Oleh kerana kita tidak mempunyai pulangan tersirat: untuk mendapatkan hasil yang diharapkan yang sepatutnya kita gunakan kembali secara eksplisit.

Pelbagai pernyataan atau ungkapan dalam badan fungsi

Pendakap keriting juga merupakan satu -satunya cara kita dapat menentukan beberapa pernyataan atau ungkapan di dalam fungsi anak panah. Sebagai contoh, katakan bahawa bukannya mengembalikan produk dua nombor, kami mahu fungsi kami mengeluarkan rentetan, memaparkannya:

const Multiply = (a, b) => const product = a*b; konsol.log ('produk $ a dan $ b ialah $ produk');  Multiply (2,3); Produk 2 dan 3 adalah 6
Salinan

Bagaimana jika fungsi anak panah kita harus mengembalikan objek literal, sendiri dibatasi oleh pendakap keriting? Dalam hal ini, kita mesti melampirkan objek literal antara kurungan:

const createChar = (CharaCtername, CharacterRace) => (name: Charactername, Race: CharacterRace); createChar ('gimli', 'kerdil') name: "gimli ', bangsa:" kerdil'
Salinan

Bagaimana ini Berlaku di dalam fungsi anak panah

Salah satu yang paling relevan, jika bukan perbezaan yang paling relevan antara fungsi klasik dan fungsi anak panah adalah bagaimana ini berfungsi. Perbezaan ini adalah sebab utama mengapa dalam beberapa kes kita tidak dapat menggunakan fungsi anak panah, seperti yang akan kita lihat tidak lama lagi. Sebelum menonjolkan perbezaan, Mari rekap bagaimana ini berfungsi apabila ia digunakan dalam fungsi standard. Perkara pertama yang perlu diingat ialah, nilai ini ditentukan oleh bagaimana fungsi itu sendiri dipanggil, mari kita lihat beberapa contoh.

Lalai: ini adalah rujukan kepada skop global

Bila ini digunakan di dalam fungsi mandiri, dan kami tidak bekerja mod yang ketat, Ini adalah rujukan skop global, iaitu tetingkap objek pada persekitaran penyemak imbas, atau objek global dalam nod.js. Dalam keadaan yang sama, tetapi dalam mod yang ketat, ini akan jadi tidak ditentukan Dan kami akan menerima ralat:

var i = 20; // di sini kami menggunakan var dan bukannya dibiarkan kerana yang terakhir tidak membuat harta di skop global. fungsi foo () konsol.log (ini.i);  // mod non-strict foo () 20 // mod ketat foo () typeError: tidak dapat membaca harta 'i' undefined
Salinan

Mengikat tersirat

Apabila fungsi standard dirujuk di dalam objek, dan fungsi itu dipanggil dengan objek itu sebagai konteks, Menggunakan notasi titik, ini menjadi rujukan kepada objek itu. Ini adalah apa yang kita panggil mengikat tersirat:

fungsi foo () konsol.log (ini.i);  biarkan objek = i: 20, foo: foo // harta foo adalah rujukan kepada fungsi foo objek.foo () // ini adalah rujukan kepada objek, jadi ini.Saya adalah objek.i 20
Salinan

Mengikat eksplisit

Kami mengatakan bahawa kami menggunakan mengikat eksplisit ketika kita secara jelas menyatakan apa ini harus rujukan. Ia dapat dicapai dengan menggunakan Panggilan, memohon atau mengikat Kaedah fungsi (yang dalam JavaScript sendiri adalah objek kelas pertama. Ingatlah kes pertama yang kita nyatakan di atas, apabila mengikat lalai berlaku:

var i = 20; fungsi foo () konsol.log (ini.i);  const object = i: 100 foo () // ini akan mengeluarkan 20 atau menghasilkan jenisError dalam mod yang ketat. // Sekiranya kita secara eksplisit menetapkan ini menjadi rujukan untuk membantah perkara -perkara yang berubah. // Panggil dan memohon melaksanakan fungsi dengan segera dengan konteks baru: foo.panggilan (objek) // output adalah 100 foo.Sapukan (objek) // output adalah 100 // mengikat sebaliknya, mengembalikan fungsi baru dengan konteks yang ditentukan. Biarkan Boundfoo = Foo.mengikat (objek) boundfoo () // output adalah 100
Salinan

Ini adalah beberapa perbezaan antara Panggilan, memohon dan mengikat: yang relevan adalah bahawa yang terakhir kembali a fungsi baru terikat pada konteks yang ditentukan, manakala dengan dua yang lain, fungsi, terikat pada konteks yang ditentukan, dilaksanakan dengan segera. Terdapat perbezaan lain, tetapi kita tidak akan melihatnya di sini. Yang penting ialah memahami bagaimana kerja mengikat secara eksplisit.

Bagaimana fungsi anak panah berbeza ini menganggap?

Dalam semua kes dan contoh di atas, kita melihat bagaimana, apabila menggunakan fungsi standard, nilai ini bergantung pada bagaimana fungsi dipanggil. Fungsi anak panah, sebaliknya, gunakan leksikal ini: mereka tidak mempunyai sendiri ini, Tetapi selalu gunakan ini dari skop yang dilampirkan mereka. Contoh biasa di mana ini dapat menghasilkan kesan yang tidak dijangka adalah pada pendengar acara. Katakan kami mempunyai butang dengan ID "Button1", dan kami ingin menukar teksnya apabila ia diklik:

Klik saya! // pendengar acara dengan fungsi standard sebagai dokumen panggil balik.getElementById ('Button1').addEventListener ('klik', fungsi () ini.innertext = "diklik!";)
Salinan

Kodnya berfungsi dengan sempurna, dan apabila butang diklik, teksnya berubah seperti yang diharapkan. Bagaimana jika kita menggunakan fungsi anak panah dalam kes ini? Katakan kita menulis seperti ini:

dokumen.getElementById ('Button1').addEventListener ('klik', () => ini.innertext = "diklik!";)
Salinan

Kod di atas tidak berfungsi, mengapa? Mudah: Kerana, seperti yang kita katakan sebelumnya, semasa dalam contoh pertama, ini di dalam fungsi panggil balik standard merujuk objek di mana peristiwa berlaku (butang), apabila kita menggunakan fungsi anak panah ini diwarisi dari skop induk, yang dalam hal ini adalah tetingkap objek. Demi kesempurnaan, kita harus mengatakan bahawa contoh di atas dapat dengan mudah ditetapkan untuk bekerja dengan fungsi anak panah:

dokumen.getElementById ('Button1').addEventListener ('klik', event => event.sasaran.innertext = "diklik!";)
Salinan

Kali ini kod berfungsi kerana kami tidak menggunakan ini untuk merujuk butang, tetapi kami membiarkan fungsi kami menerima satu hujah, iaitu peristiwa. Dalam badan fungsi yang kami gunakan peristiwa.sasaran untuk merujuk objek yang menghantar acara tersebut.

Atas sebab yang sama yang kita nyatakan di atas, fungsi anak panah tidak boleh digunakan sebagai kaedah objek atau kaedah prototaip:

// Fungsi anak panah tidak berfungsi sebagai kaedah objek ... const objek1 = i: 1000, foo: () => konsol.log ('Nilai i ialah $ ini.i ') objek1.foo () nilai saya tidak ditentukan // ... dan mereka tidak berfungsi sebagai kaedah prototaip. const orang = fungsi (nama, umur) ini.nama = nama; ini.umur = umur;  Orang.prototaip.memperkenalkan = () => konsol.log ('nama saya $ ini.nama dan saya $ ini.umur tahun '); const Jack = orang baru ('Jack', 100); Jack.Namakan 'Jack' Jack.Umur 100 Jack.memperkenalkan () nama saya tidak ditentukan dan saya berumur tahun yang tidak ditentukan
Salinan

Kesimpulan

Sintaks fungsi anak panah adalah ciri yang sangat bagus diperkenalkan dengan ecmascript6. Dengan cara baru ini menentukan fungsi kita boleh menulis kod yang lebih pendek dan bersih. Kami melihat bagaimana untuk menentukan fungsi anak panah, dan bagaimana sintaks baru berfungsi.

Kami juga melihat mengapa fungsi anak panah tidak dapat menggantikan fungsi standard dalam semua keadaan, kerana mereka tidak mempunyai sendiri ini, dan menggunakan salah satu skop yang dilampirkan: ini, seperti yang kita lihat dalam tutorial ini, menjadikannya tidak boleh digunakan sebagai kaedah atau pembina. Sekiranya anda berminat dengan tutorial JavaScript yang lain, tunggu: dalam tutorial seterusnya kami akan bercakap mengenai ambil, fungsi. Sementara itu, anda boleh menyemak artikel kami mengenai janji.

Tutorial Linux Berkaitan:

  • Advanced Bash Regex dengan contoh
  • Pengenalan kepada Gelung JavaScript
  • Pengenalan kepada Automasi, Alat dan Teknik Linux
  • Menguasai Gelung Skrip Bash
  • Perkara yang hendak dipasang di Ubuntu 20.04
  • Gelung bersarang dalam skrip bash
  • Bash regexps untuk pemula dengan contoh
  • Mint 20: Lebih baik daripada Ubuntu dan Microsoft Windows?
  • Tutorial Debugging GDB untuk Pemula
  • Buat pengalihan dan tulis semula peraturan ke dalam .Htaccess di Apache ..