Jika anda telah lama mengaturcarakan dalam JavaScript, anda pasti pernah mendengar tentang... fungsi anak panah dan tingkah laku istimewa yang terkenal kursusDan kemungkinan besar juga kepala anda telah meletup lebih daripada sekali cuba memahami sebabnya. kursus Satu perkara terpakai kepada fungsi biasa dan sesuatu yang sama sekali berbeza dengan fungsi anak panah.
Menguasai dua konsep ini bukan sekadar soal teori: ia adalah kunci kepada penulisan Kod moden dalam JavaScript dan ReactMemahami cara pengendali peristiwa berfungsi, bagaimana konteks bertindak dalam kelas, bagaimana panggilan balik tak segerak diselesaikan dalam Node.js dan mengapa corak tertentu dianggap sebagai amalan yang baik pada masa kini.
Pertama sekali: ulasan ringkas tentang fungsi dalam JavaScript
Dalam JavaScript, anda boleh mengisytiharkan fungsi dalam beberapa cara, dan setiap cara mempunyai implikasi terhadap bagaimana ia berfungsi. kursusdalam skop dan pada masa ini fungsi tersebut tersedia dalam kod tersebut.
Pengisytiharan fungsi
Deklarasi fungsi klasik menggunakan kata kunci fungsi dan nama. Fungsi jenis ini "dinaikkan" (angkat) pada permulaan skop di mana ia diisytiharkan, yang membolehkan fungsi dipanggil walaupun sebelum definisinya dalam fail.
Dalam fungsi yang diisytiharkan secara tradisional, nilai bagi kursus ditentukan mengikut bagaimana Fungsi ini dipanggil: jika ia dipanggil sebagai kaedah objek, jika ia digunakan dengan baru, jika ia berada dalam mod ketat, jika ia bertukar kepada memanggil, memohon o mengikatdsb. Fleksibiliti ini berkuasa, tetapi ia juga merupakan punca banyak ralat dalam kod kompleks.
Ungkapan fungsi
Anda juga boleh menetapkan peranan tanpa nama atau bernama kepada berubah-ubahDalam kes itu, fungsi itu sendiri tidak dibangkitkan, hanya pengisytiharan pembolehubah yang dibangkitkan (dengan var), tetapi bukan nilainya. Dengan biarkan y malar Anda tidak boleh menggunakannya sebelum garis takrifnya kerana zon mati sementara.
Fungsi-fungsi ini berkongsi model yang sama iaitu dinamik ini Tidak seperti deklarasi klasik: nilainya sentiasa bergantung pada konteks pemanggilan, jadi ia tetap sensitif terhadap cara anda menyampaikannya sebagai panggilan balik atau cara anda menggunakannya dalam kelas dan objek.
Apakah sebenarnya fungsi anak panah?
Fungsi anak panah diperkenalkan dengan ECMAScript 2015 (ES6) sebagai cara yang lebih mudah, padat dan ekspresif untuk mengisytiharkan fungsi, terutamanya untuk panggilan balik dan pengaturcaraan berfungsi dengan kaedah seperti peta, menapis o mengurangkan.
Sintaks asasnya terdiri daripada senarai parameter, diikuti oleh operator => dan kemudian satu ungkapan atau blok kodFormat padat ini menjadikan kod lebih cekap. boleh dibaca dalam banyak senario di mana anda sebelum ini terpaksa menulis fungsi tanpa nama yang panjang dan berulang.
Sintaks asas fungsi anak panah
Fungsi anak panah menyokong beberapa variasi sintaks, semuanya berdasarkan peraturan yang sama tetapi dengan pintasan untuk kes yang lebih mudah. ​​Memahami setiap bentuk membantu anda menulis dengan lebih baik. kod yang lebih bersih Saya dapat dengan cepat mengenali apa yang dilakukan oleh setiap panggilan balik.
- Tanpa parameterKurungan kosong digunakan sebelum anak panah dan biasanya ungkapan selepasnya.
const getMessage = () => "Hola"; - Parameter tunggalAnda boleh meninggalkan kurungan di sekitar nama parameter, yang menjadikan kod lebih ringkas.
const square = x => x * x; - Beberapa parameterAnda sentiasa perlu menggunakan kurungan yang melampirkannya, dipisahkan dengan koma.
const sum = (a, b) => a + b; - Badan satu ungkapanJika anda tidak menggunakan pendakap kerinting, ungkapan dikembalikan dengan cara tertentu. tersirat tanpa perlu menulis pulangan.
- Badan berbilang barisJika anda menggunakan kekunci, anda perlu menulis pulangan secara eksplisit untuk mengembalikan nilai, sama seperti dalam fungsi biasa.
Punca kesilapan yang biasa berlaku ialah melupakan pulangan Apabila anda beralih daripada versi satu baris kepada badan dengan pendakap kerinting untuk menambah lebih banyak logik, tiba-tiba fungsi anda mula kembali undefined Dan tidak jelas mengapa.
Fungsi anak panah dan objek literal
Jika fungsi anak panah ungkapan tunggal mengembalikan objek literalAnda perlu membungkus objek itu dalam kurungan supaya enjin tidak tersilap menganggapnya sebagai permulaan blok fungsi. Ia adalah perangkap sintaks kecil yang mengejutkan ramai orang.
Jika tidak, penterjemah mentafsirkan kekunci sebagai blok kosong dan fungsi anda tidak akan mengembalikan objek, tetapi undefinedIni menyebabkan ralat yang sukar dikesan apabila anda cuba mengakses sifat yang tidak pernah dikembalikan.
Fungsi anak panah dan kelakuannya
Faktor pembezaan sebenar fungsi anak panah bukanlah sintaksnya, tetapi sintaksnya model iniWalaupun fungsi tradisional mempunyai dinamik ini Bergantung pada namanya, fungsi anak panah mempunyai leksikon iniIaitu, mereka menangkap Ini dari kawasan tempat ia diciptakan dan mereka mengekalkannya tanpa perubahan.
Ini bermakna bahawa dalam fungsi anak panah, kursus Ia tidak boleh diubah dengan memanggil, memohon ni mengikatDan ia tidak bergantung pada sama ada anda menggunakannya sebagai panggilan balik dalam pengendali peristiwa atau menghantarnya ke fungsi lain. Ia akan sentiasa mempunyai nilai yang sama di luarnya pada masa definisinya.
Bagaimanakah ini berfungsi dalam fungsi biasa?
Dalam fungsi yang diisytiharkan dengan fungsi, nilai kursus Ia bergantung pada konteksnya:
- Jika anda memanggil fungsi tersebut sebagai kaedah sesuatu objek, kursus Tunjuk ke arah objek itu.
- Jika anda memanggilnya tanpa konteks dalam mod tidak ketat, kursus rujukan kepada objek global (tetingkap dalam pelayar, global dalam Node.js).
- Jika anda menggunakannya baru, kursus ia kemudiannya menunjuk kepada contoh yang baru dibuat.
- Jika anda memohon memanggil, memohon o mengikat, anda boleh memaksa nilai kursus secara manual ke objek pilihan anda.
Dalam mod ketat, jika anda memanggil fungsi normal tanpa objek sebagai penerima dan tanpa menggunakan memanggil atau sama, kursus akan menjadi undefinedItulah sebabnya dalam banyak contoh moden anda melihat fungsi yang bermula dengan 'use strict' untuk mengelakkan kesilapan senyap dan memaksa tingkah laku yang lebih konsisten.
Bagaimanakah ini berfungsi dalam fungsi anak panah?
Dalam kes fungsi anak panah, kursus Ia tidak dikira semula apabila dipanggil; ia diambil terus daripada kawasan di mana ia ditakrifkanIaitu, ia bertindak serupa dengan bagaimana pembolehubah ditangkap oleh penutupan (penutupan): Mereka memandang ke luar dan mengingati nilai itu selama-lamanya.
Ini mempunyai beberapa akibat yang sangat penting untuk kehidupan seharian anda:
- Anda tidak boleh menggunakan fungsi anak panah seperti pembina dengan barukerana mereka tidak mempunyai milik mereka sendiri kursus mahupun prototaip yang sesuai.
- Memanggil fungsi anak panah dengan memanggil o memohon tidak akan mengubah nilai kursusWalau bagaimanapun, anda akan dapat meluluskan hujah-hujah yang lain secara normal.
- Dalam kaedah objek yang dicipta sebagai fungsi anak panah, kursus Ia tidak akan menghala ke arah objek, tetapi ke arah persekitaran atas (contohnya, tetingkap atau modul), yang hampir selalu merupakan pepijat.
Kesimpulannya ialah fungsi anak panah adalah ideal apabila anda mahukan Yang dalaman ini sama sahaja dengan yang luaran.Tetapi ia adalah idea yang buruk apabila anda memerlukan kaedah objek sebenar atau apabila anda berhasrat untuk mewujudkan sesuatu dengan baru.
Fungsi anak panah, kelas dan React
Di dunia Bertindak dan kelas JavaScript secara umum, pengendalian kursus Ia isu sensitif. Komponen kelas yang diwarisi daripada React.Component Mereka menggunakan kaedah di mana kursus mesti sentiasa menunjuk ke contoh komponen untuk mengakses prop ini y ini.negeri.
Dengan kaedah yang ditakrifkan menggunakan sintaks kelas klasik, nilai kursus Ia boleh "hilang" apabila meluluskan kaedah sebagai panggilan balik peristiwa, contohnya kepada diKlikItulah sebabnya dalam banyak tutorial lama anda akan melihat corak seperti ini.metodo.bind(ini) dalam pembina atau secara langsung dalam JSX, sesuatu yang dianggap agak bertele-tele pada masa kini.
Corak pengikatan tipikal ini dalam React
Dalam komponen kelas, terdapat empat cara utama dari segi sejarah untuk memastikan bahawa kursus sentiasa menunjuk ke komponen apabila dipanggil daripada pengendali peristiwa:
- Gunakan mengikat dalam kaedah menghasilkan, yang memastikan konteks tetapi mewujudkan fungsi baharu dalam setiap pemaparan.
- Buat yang ikat dalam pembina untuk mengelakkan penciptaan semula fungsi berulang kali, mengekalkan satu rujukan sahaja.
- Takrifkan pengendali sebagai sifat kelas dengan fungsi anak panah, memanfaatkan fakta bahawa fungsi anak panah menangkap kursus daripada contoh itu.
- Guna fungsi anak panah sebaris dalam JSX, secara langsung menghantar fungsi anak panah kepada atribut diKlik atau yang setara.
Dalam praktiknya, pilihan untuk mengisytiharkan pengendali sebagai sifat kelas menggunakan fungsi anak panah Ia menjadi corak yang paling mudah: anda menulis kurang kod, anda mengelakkan daripada perlu melakukan mengikat manual dan kursus sentiasa sasarkan komponen tersebut tanpa kejutan.
Fungsi anak panah dalam komponen fungsi
Dengan kedatangan komponen dan cangkuk berfungsiReact lebih bergantung pada fungsi anak panah. Kebanyakan komponen moden dilaksanakan sebagai anak panah. const Komponen Saya = () => { … }Ini menjadikan penggunaan fungsi anak panah semula jadi dan konsisten di seluruh pokok.
Dalam komponen ini, adalah perkara biasa untuk menggabungkan fungsi anak panah dengan ciri ES6 lain seperti merosakkan, literal templat, operator ternari, penyebaran dan kaedah tatasusunan seperti peta, menapis y mengurangkan, justeru membina sintaks yang sangat ekspresif tetapi memerlukan pengendalian konteks dan kebolehubahan yang baik.
Ini dalam konteks global, objek dan fungsi individu
Untuk memahami mengapa fungsi anak panah banyak mengubah permainan, adalah wajar untuk mengkaji semula cara ia berfungsi. kursus dalam konteks JavaScript asli yang berbeza, baik dalam pelayar mahupun dalam Node.js.
Di dalamnya skop global pelayar, di luar mana-mana fungsi atau modul, kursus tunjuk ke arah objek tetingkapIni bermakna sebarang pembolehubah yang diisytiharkan dengan var Pada tahap yang lebih tinggi, ia bergantung pada objek global itu dan boleh diakses melalui nama dan juga nama tetingkapIni dianggap sebagai amalan buruk dalam aplikasi kompleks disebabkan oleh pencemaran global.
ini dalam objek literal
Apabila anda mentakrifkan objek literal Dengan kaedah tradisional, setiap kaedah menerima kursus yang merujuk kepada objek itu sendiri apabila menggunakannya sebagai obj.kaedah()Ini adalah cara standard untuk mengakses hartanah saudara dengan hartanah ini tanpa memerlukan pembolehubah perantaraan.
Masalahnya timbul apabila anda menggantikan kaedah ini dengan fungsi anak panahOleh kerana kita tidak mempunyai ini sendiriFungsi anak panah akan menangkap `this` luaran, yang mungkin merupakan global atau modul `this`. Akibatnya, anda tidak akan dapat mengakses sifat objek dalam kaedah menggunakan kursus, melanggar sepenuhnya niat asal reka bentuk itu.
Ini berada dalam fungsi longgar dan mod ketat
Dalam fungsi tradisional yang dipanggil "unplugged", tanpa objek penerima, nilai kursus Ia bergantung kepada sama ada kod itu ada dalam mod ketat Atau tidak. Secara tepatnya, ia kembali kepada objek global, walaupun secara tegasnya ia menjadi secara eksplisit undefineduntuk mengelakkan tindakan berbahaya terhadap alam sekitar global.
Tingkah laku ini berubah secara drastik apabila anda merangkum kod anda dalam modul ES, bundler moden atau IIFE, di mana global boleh berbeza atau tidak terikat kepada kursus dengan cara yang biasa, terutamanya dalam Node.js, di mana skop utama arkib adalah modul dan bukan yang global.
memanggil, memohon, mengikat dan hubungan mereka dengan ini
JavaScript menawarkan tiga kaedah yang digunakan secara meluas berbanding fungsi klasik untuk mengurus konteks: memanggil, memohon y mengikatKesemuanya membolehkan anda mengawal nilai yang diperlukan secara eksplisit. kursus apabila fungsi tersebut dilaksanakan.
Kaedah-kaedah ini hanya berfungsi dengan fungsi yang diisytiharkan dengan fungsi (atau yang setara), kerana fungsi anak panah mengabaikan sebarang percubaan untuk mengubah `this` mereka. Itulah sebabnya ketiga-tiganya sangat berguna apabila bekerja dengan API legasi, kelas lama atau corak di mana anda ingin menggunakan semula fungsi yang sama pada objek yang berbeza.
panggil dan guna: seru dengan jelas ini
jadi memanggil sebagai memohon mereka melaksanakan fungsi tersebut dengan segeraSatu-satunya perbezaan ialah cara anda menghantar argumen. Dalam kedua-dua kes, parameter pertama yang anda hantar ialah objek yang perlu ditukar. kursus dalam fungsi tersebut.
dengan memanggil Hujah-hujah berikutnya dinyatakan satu persatu, manakala dengan memohon Mereka menyamar sebagai pelbagaiIni sangat sesuai dengan situasi di mana anda sudah mempunyai senarai argumen sebagai koleksi dan anda mahu menyuntiknya seperti sedia ada ke dalam panggilan.
bind: cipta fungsi baharu dengan set `this`
Kaedah ini mengikat Ia tidak melaksanakan fungsi pada masa ini, tetapi sebaliknya menjana fungsi baru dengan ini berkaitan secara kekal kepada objek yang anda tentukan. Ia seperti mencipta versi "khusus" bagi versi asal yang akan sentiasa berkelakuan dalam konteks tersebut.
Corak ini sangat biasa untuk menghantar kaedah objek kepada API yang kemudiannya akan memanggilnya kemudian, contohnya, sebagai panggilan balik peristiwa, tanpa kehilangan konteks asal. Sebelum popularisasi fungsi anak panah, mengikat Ia adalah salah satu cara paling bersih untuk memastikan kaedah kelas terus menunjukkan contoh yang betul.
Mengapakah fungsi anak panah sesuai untuk panggilan balik?
Salah satu sebab mengapa fungsi anak panah telah menakluki ekosistem JavaScript adalah kesesuaiannya untuk panggilan balik tak segerak dan pengaturcaraan berfungsi. Apabila bekerja dengan API seperti setTimeout, tetapkanInterval, Menjanjikan Atau dengan gelung peristiwa Node.js, anda sering perlu mengakses konteks luar tanpa ia diputarbelitkan.
Sebelum ES6, helah seperti menyimpan telah digunakan const diri = ini o tetap itu = ini sebelum memasuki panggilan balik, supaya objek yang betul masih boleh dirujuk dari dalam fungsi. Fungsi anak panah menjadikan ini tidak perlu dengan menangkap secara automatik Luaran ini dan memeliharanya.
Fungsi anak panah dan gelung peristiwa dalam Node.js
En Node.js, di mana kebanyakan kod menarik berkisar tentang I/O Tak Segerak (fail, rangkaian, pemasa), gabungan fungsi anak panah dengan model gelung peristiwa dan barisan panggil balik Ia memudahkan kehidupan. Setiap kali anda menghantar fungsi seperti pengendali kepada fs.readFileSama ada anda menghantar pelayan HTTP atau sebarang operasi libuv, fungsi arrow membantu memastikan rujukan kepada pembolehubah bersebelahan dan konteks modul bebas daripada kejutan.
Tambahan pula, dalam barisan tugas mikro seperti yang ada pada Menjanjikan o proses.seterusnyaTickAdalah sangat biasa untuk menulis panggilan balik pendek seperti kemudian o menangkap dengan sintaks anak panah, memanfaatkan kedua-duanya pulangan tersirat sebagai leksikon ini, yang menjadikan kod lebih deklaratif dan ekspresif.
Bilakah anda TIDAK BOLEH menggunakan fungsi anak panah?
Walaupun fungsi anak panah mungkin kelihatan seperti penyelesaian ajaib untuk semua masalah, terdapat senario di mana penggunaannya secara langsung tidak produktif dan juga menghasilkan pepijat yang sukar dikesan.
Salah satunya, mungkin yang paling penting, ialah kaedah objek atau kelas yang memerlukan `ini` mereka sendiriSatu lagi ialah apabila anda ingin mencipta pembina atau menggunakan corak berorientasikan objek yang disokong oleh prototaip dan pewarisan, di mana ketiadaan prototaip dan konteksnya sendiri bermakna fungsi anak panah tidak sesuai.
Elakkan penggunaan fungsi anak panah sebagai kaedah objek.
Jika anda mentakrifkan kaedah objek dengan fungsi anak panah, Dalaman ini tidak akan merujuk kepada objektetapi lebih kepada konteks di mana objek itu ditakrifkan. Ini memecah jangkaan sesiapa sahaja yang membaca kod dan berhasrat untuk menggunakannya hartanah ini dalam kaedah tersebut.
Cara yang disyorkan untuk menulis kaedah yang bergantung kepada kursus Ia mengenai terus menggunakan sintaks klasik dalam objek literal atau mengisytiharkan kaedah tersebut secara standard dalam kelas, menempah fungsi anak panah untuk panggilan balik dalaman yang perlu ditangkap kursus daripada kaedah yang lebih unggul.
Jangan gunakan fungsi anak panah sebagai pembina
Fungsi anak panah kekurangan [[Bina]], mekanisme dalaman yang membolehkan fungsi dipanggil dengan baruOleh itu, percubaan untuk menggunakannya sebagai pembina akan menghasilkan Taip KesalahanMereka juga tidak mempunyai milik mereka sendiri. prototaipOleh itu, anda tidak boleh menggantung kaedah kongsi untuk contoh.
Jika reka bentuk anda memerlukan contoh yang boleh diguna semula dengan sifat dan kaedah yang sama, anda harus memilih kelas atau oleh fungsi pembina tradisional, meninggalkan fungsi anak panah untuk logik tanpa status atau utiliti berfungsi semata-mata.
Hubungan dengan ciri-ciri moden JavaScript yang lain
Fungsi anak panah jarang digunakan secara berasingan; ia hampir selalu seiring dengan ciri-ciri lain Skrip ECMA Moden yang turut mempengaruhi cara anda mengatur dan memahami kod. Antara yang paling berkaitan ialah biarkan y malar, yang tidak berubah, The merosakkan dan sintaks penyebaran.
Mengetahui cara menggabungkannya dengan betul membolehkan anda menulis fungsi anak panah yang sangat ringkas yang mengubah data dengan kaedah tatasusunan seperti peta, menapis y mengurangkansentiasa mengekalkan keadaan asal yang utuh, sesuatu yang penting dalam persekitaran seperti React di mana corak kebolehubahan adalah norma.
let, const dan kebolehubahan
Ketibaan biarkan y malar Ia membenarkan kerja dengan skop blok dan dengan rujukan yang tidak ditugaskan semula. Digabungkan dengan fungsi anak panah, adalah amalan biasa hari ini untuk mengisytiharkan fungsi sebagai const Fungsi saya = () => {…}, memastikan bahawa pembolehubah yang mengandungi fungsi tersebut tidak akan ditulis ganti.
Dalam struktur data seperti tatasusunan dan objek, kebolehubahan digalakkan melalui penggunaan Bekukan objek apabila anda ingin mengelakkan perubahan yang mendalam, dan melalui operasi penyebaran dan kaedah tulen apabila anda perlu mencipta salinan yang diubah suai Daripada mengubah suai yang asal, sesuatu yang amat penting apabila pemaparan atau keadaan bergantung pada pengesanan perubahan.
Literal templat, ternari dan litar pintas
Dalam membuat panggilan balik, contohnya dalam JSX atau semasa membina rentetan HTML, hampir tidak dapat dielakkan untuk menggabungkan fungsi anak panah dengan literal templat (backtick) dan operator seperti ternari gelombang penilaian litar pintasOperator ini membolehkan anda menulis syarat sebaris yang sangat ekspresif yang sangat sesuai dengan gaya deklaratif fungsi anak panah.
Dalam literal templat, ungkapan ${…} Ia diselesaikan dengan skop leksikal yang sama yang mendominasi fungsi anak panah 'ini', jadi adalah penting untuk jelas tentang pembolehubah mana dan konteks yang digunakan dalam setiap interpolasi untuk mengelakkan tingkah laku yang samar-samar.
Fungsi anak panah dalam lelaran dan koleksi
Salah satu bidang di mana fungsi anak panah telah membuat perbezaan terbesar adalah dalam pemprosesan tatasusunan dan koleksiMenghantar panggilan balik pendek kepada kaedah seperti peta, menapis, mencari o mengurangkan Ia menjadi jauh lebih mudah dibaca dengan sintaks anak panah.
Contohnya, menapis entri dalam senarai berdasarkan kategori atau mengubah hasil API kepada struktur data dalaman menjadi lebih deklaratif dan digabungkan dengan merosakkan Mudah untuk mengekstrak hanya sifat yang anda perlukan dari dalam parameter fungsi.
peta, tapis, kurangkan dan syarikat
Gabungan tipikal biasanya seperti ini: senarai.penapis(item => keadaan).peta(item => transformasi)merangkaikan beberapa fungsi anak panah ke dalam kaedah tatasusunan. Setiap satunya mewarisi `this` daripada konteks tempat ia ditakrifkan, walaupun dalam kebanyakan kes ini `this` tidak digunakan, tetapi sebaliknya parameter eksplisit, mengukuhkan gaya fungsian.
En mengurangkanDalam kes ini, di mana anda mengurus akumulator yang beralih dari lelaran ke lelaran, fungsi anak panah membolehkan anda menyatakan operasi pengurangan dengan sangat ringkas, walaupun adalah dinasihatkan untuk tidak menggunakan ungkapan yang terlalu padat jika anda mahu kod tersebut kekal difahami oleh pembangun lain.
Import, eksport dan modul
Dalam ekosistem JavaScript moden, hampir semua kod disusun menjadi modulsama ada menggunakan sintaks asli eksport import atau dengan menggunakan sistem penggabungan yang dikompilasi kepada format tersebut. Dalam konteks ini, fungsi anak panah sangat sesuai sebagai unit fungsi yang boleh diguna semula.
Adalah perkara biasa untuk melihat utiliti dieksport sebagai const myUtil = (…) => {…} dan kemudian diimport ke dalam fail yang berbeza. Memandangkan setiap modul berada dalam skopnya sendiri, leksikon ini Konteks fungsi anak panah cenderung menjadi modul, yang dalam kebanyakan utiliti tulen tidak relevan, kerana ia tidak memerlukan konteks.
Amalan terbaik dengan modul dan skrip luaran
Apabila menyediakan JavaScript dalam halaman HTML, adalah lebih baik untuk memuatkannya menggunakan fail luaran dan elakkan daripada membenamkan blok sebaris yang besar. Juga, gunakan atribut jenis="modul" dalam tag skrip membolehkan sintaks moden eksport import dan menjelaskan bahawa fail tersebut dilaksanakan dalam mod tegas lalai.
Berkenaan prestasi, meletakkan skrip modul dalam kepala dengan menunda membolehkan pelayar memuat turun dan melaksanakan kod tanpa menyekat pemaparan HTML, sambil mengekalkan pengalaman pengguna yang baik. Dalam keseluruhan skema ini, fungsi anak panah hanyalah cara paling semula jadi untuk menentukan cebisan kecil logik yang boleh diguna semula.
Memasukkan dan Memanipulasi DOM dengan JavaScript Moden
Walaupun fokus topik ini adalah pada anak panah dan fungsi `ini`, adalah mustahil untuk mengabaikan peranan JavaScript dalam Manipulasi DOMKaedah seperti getElementById, querySelector, tetapkanAtribut atau pengubahsuaian gaya Ia masih asas, tetapi hari ini ia biasanya digabungkan dengan panggilan balik anak panah untuk bertindak balas terhadap peristiwa dan mengemas kini antara muka.
Bekerja dengan pendengar acara menggunakan element.addEventListener('click', e => {...}) Ini adalah cara standard untuk mengaitkan logik dengan interaksi pengguna. Dalam pengendali ini, kursus Di dalam fungsi anak panah, ia bukan elemen DOM, tetapi konteks luaran, jadi jika anda memerlukan nod, anda perlu menggunakan parameter peristiwa itu sendiri. e.sasaran semasa o e.sasaran, dan bukannya bergantung pada ini seperti atribut sebaris lama.
JavaScript Segerak, JavaScript Tak Segerak dan Panggilan Balik
Satu lagi bidang utama di mana fungsi anak panah membuat perbezaan adalah dalam pengaturcaraan tak segerakJavaScript adalah thread tunggal dan, untuk mengelakkan penyekatan antara muka, ia mewakilkan operasi perlahan kepada API pelayar atau Nod yang kemudiannya memanggil panggilan balik anda apabila ia selesai.
Anak panah hantar berfungsi sebagai panggilan balik kepada setTimeout, menjanjikanPermintaan HTTP atau akses cakera menjadikan kod lebih padat dan mengekalkan konteks tanpa helah tambahan. Dalam langkah panggilan balik bersarang ke arah Menjanjikan dan kemudian ke arah async / tungguFungsi anak panah telah menjadi elemen penting dalam menjadikan aliran data boleh dibaca.
Secara keseluruhannya, memahami bagaimana Fungsi anak panah menangkap ini secara leksikalMengetahui bila ia menjadi sekutu terbaik anda dan bila masa terbaik untuk terus bergantung pada fungsi tradisional, bersama-sama dengan mengetahui cara menggabungkannya dengan modul, kaedah tatasusunan, kebolehubahan, kelas dan gelung peristiwa, adalah apa yang membolehkan anda menulis JavaScript dan React yang benar-benar kukuh; pada akhirnya, ia adalah tentang memilih bentuk fungsi yang betul untuk setiap konteks, memanfaatkan faedah sintaksisnya tanpa jatuh ke dalam kes sempadan di mana tingkah laku 'ini' boleh menjadi bumerang. Kongsikan panduan pengaturcaraan ini dan fungsi anak panah JavaScript.