Rumah hujung hadapan web Soal Jawab bahagian hadapan Mari kita bincangkan tentang corak hiasan fungsi biasa dalam JavaScript

Mari kita bincangkan tentang corak hiasan fungsi biasa dalam JavaScript

Apr 25, 2023 am 09:12 AM

Hiasan fungsi ialah corak reka bentuk yang mengubah gelagat fungsi dengan menambahkan kod tambahan di dalamnya. Dalam JavaScript, anda boleh menggunakan hiasan fungsi untuk melaksanakan beberapa operasi apabila fungsi dipanggil, seperti mengesahkan parameter input, mengubah suai nilai pulangan atau caching hasil pengiraan fungsi, dsb. Artikel ini akan membantu anda lebih memahami dan menggunakan teknologi ini dengan memperkenalkan corak hiasan fungsi biasa dalam JavaScript.

1. Corak penghias

Corak penghias ialah corak reka bentuk struktur yang membolehkan objek menambah fungsi atau gelagat baharu secara dinamik semasa masa jalan. Dalam JavaScript, fungsi juga merupakan objek, jadi kita boleh menggunakan corak penghias untuk menghiasi fungsi.

Contoh berikut menunjukkan cara menggunakan corak penghias untuk menambah fungsi pengesahan input:

function validateInput(fn) {
  return function(...args) {
    for(let arg of args) {
      if(typeof arg !== 'number') {
        throw new Error('Invalid input, input should be a number');
      }
    }
    return fn(...args);
  }
}

function addNumbers(a, b) {
  return a + b;
}

const addNumbersWithValidation = validateInput(addNumbers);

console.log(addNumbersWithValidation(1, 2)); //output: 3
console.log(addNumbersWithValidation('1', 2)); //throws Error: Invalid input, input should be a number
Salin selepas log masuk

Dalam contoh di atas, kami mentakrifkan fungsi bernama validateInput yang Menerima fungsi sebagai parameter dan mengembalikan fungsi baharu. Fungsi baharu ini terlebih dahulu akan mengesahkan sama ada parameter input ialah nombor, dan jika ya ia akan memanggil fungsi asal, jika tidak ia akan membuang ralat.

Akhir sekali, kami menghiasi fungsi validateInput dengan addNumbers, mencipta fungsi baharu addNumbersWithValidation dan menggunakannya untuk menambah dua nombor. Apabila parameter input ialah rentetan dan nombor, kita dapat melihat bahawa kelakuan addNumbersWithValidation adalah berbeza daripada addNumbers asal kerana ia mengesahkan parameter input.

Apabila menggunakan corak penghias, anda perlu memberi perhatian kepada perkara berikut:

  • Fungsi penghias harus mengembalikan fungsi baharu.
  • Fungsi baharu harus menerima parameter yang sama seperti fungsi asal dan melakukan beberapa operasi tambahan sebelum atau selepas memanggil fungsi asal.
  • Fungsi penghias boleh digubah. Sebagai contoh, kita boleh menulis satu penghias untuk pengesahan input dan satu lagi untuk cache output.

2. Fungsi tertib lebih tinggi

Dalam JavaScript, fungsi adalah warga kelas pertama, yang bermaksud kita boleh melayannya seperti pembolehubah biasa. Fungsi tertib tinggi ialah fungsi yang menerima satu atau lebih fungsi sebagai argumen dan mengembalikan fungsi baharu. Menggunakan fungsi tertib lebih tinggi membolehkan kami mengendalikan fungsi dengan lebih fleksibel, dengan kebolehbacaan dan kebolehgunaan semula yang lebih tinggi.

Contoh berikut menunjukkan fungsi tertib tinggi yang mudah:

function higherOrderFunction(a, b, callback) {
  const result = callback(a, b);
  console.log(`The result is ${result}`);
}

function add(a, b) {
  return a + b;
}

higherOrderFunction(1, 2, add); //output: The result is 3
Salin selepas log masuk

Dalam contoh di atas, kami telah menentukan fungsi bernama higherOrderFunction yang menerima dua nombor dan fungsi panggil balik sebagai parameter . Di dalam fungsi higherOrderFunction, kami memanggil fungsi panggil balik dan mengeluarkan nilai pulangannya kepada konsol.

Akhir sekali, kami menggunakan fungsi add untuk mengendalikan dan menghantarnya sebagai fungsi panggil balik kepada higherOrderFunction. Di dalam higherOrderFunction, kami mengeluarkan hasil panggilan add ke konsol.

Ringkasnya, fungsi tertib lebih tinggi ialah alat berkuasa yang membolehkan kami mengendalikan fungsi dan pembolehubah dengan lebih fleksibel, serta memberikan kebolehbacaan dan kebolehgunaan semula yang lebih tinggi.

3. Fungsi kari

Fungsi kari ialah teknik yang dicapai dengan menukar fungsi berbilang parameter kepada satu siri fungsi parameter tunggal. Dengan cara ini, kita boleh menyimpan sebahagian daripada hujah dalam setiap fungsi hujah tunggal dan menggunakan bahagian tersebut untuk memanggil fungsi asal. Kari fungsi boleh menjadikan kod lebih ringkas dan boleh dibaca, dan secara semula jadi menyokong operasi abstrak seperti komposisi fungsi dan komposisi fungsi.

Contoh berikut menunjukkan cara menggunakan kari untuk membahagikan berbilang parameter kepada berbilang langkah:

function add(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    }
  }
}

console.log(add(1)(2)(3)); //output: 6
Salin selepas log masuk

Dalam contoh di atas, kami mentakrifkan parameter yang menerima a dan mengembalikan fungsi fungsi. Memanggil fungsi yang dikembalikan juga mengembalikan fungsi. Akhirnya, fungsi paling dalam secara langsung menambah semua parameter bersama-sama dan mengembalikan hasil yang sepadan.

Apabila menggunakan fungsi kari, anda perlu memberi perhatian kepada perkara berikut:

  • Setiap fungsi parameter tunggal hanya perlu menerima satu parameter.
  • Setiap fungsi hujah tunggal harus mengembalikan fungsi lain, atau akhirnya beberapa nilai.
  • Fungsi karipap boleh dilaksanakan menggunakan kaedah bind. Contohnya, const add10 = add.bind(null, 10) boleh digunakan untuk mencipta fungsi add10 yang melepasi 10 sebagai hujah pertama kepada fungsi add.

4. Kesimpulan

Dengan menggunakan corak penghias, fungsi tertib tinggi dan fungsi kari, kami boleh memproses dan menggabungkan fungsi dengan lebih fleksibel, dan melaksanakan beberapa fungsi lanjutan, seperti Sahkan input, hasil cache, gabungan fungsi dan banyak lagi. Teknik ini sangat biasa dalam JavaScript, jadi ia berbaloi untuk dipelajari dan dikuasai secara mendalam.

Atas ialah kandungan terperinci Mari kita bincangkan tentang corak hiasan fungsi biasa dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Mar 19, 2025 pm 03:58 PM

Artikel ini membincangkan useeffect dalam React, cangkuk untuk menguruskan kesan sampingan seperti pengambilan data dan manipulasi DOM dalam komponen berfungsi. Ia menerangkan penggunaan, kesan sampingan yang biasa, dan pembersihan untuk mencegah masalah seperti kebocoran memori.

Bagaimanakah algoritma Rekonsiliasi React berfungsi? Bagaimanakah algoritma Rekonsiliasi React berfungsi? Mar 18, 2025 pm 01:58 PM

Artikel ini menerangkan algoritma perdamaian React, yang dengan cekap mengemas kini DOM dengan membandingkan pokok DOM maya. Ia membincangkan manfaat prestasi, teknik pengoptimuman, dan kesan terhadap pengalaman pengguna. Kira -kira: 159

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Mar 18, 2025 pm 01:44 PM

Fungsi pesanan yang lebih tinggi dalam JavaScript meningkatkan ketabahan kod, kebolehgunaan semula, modulariti, dan prestasi melalui abstraksi, corak umum, dan teknik pengoptimuman.

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Mar 18, 2025 pm 01:45 PM

Artikel ini membincangkan kari dalam JavaScript, teknik yang mengubah fungsi multi-argumen ke dalam urutan fungsi argumen tunggal. Ia meneroka pelaksanaan kari, faedah seperti aplikasi separa, dan kegunaan praktikal, meningkatkan kod baca

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Mar 19, 2025 pm 03:59 PM

Artikel ini menerangkan USEContext dalam React, yang memudahkan pengurusan negara dengan mengelakkan penggerudian prop. Ia membincangkan faedah seperti keadaan terpusat dan penambahbaikan prestasi melalui pengurangan semula yang dikurangkan.

Bagaimana anda menyambungkan komponen React ke kedai Redux menggunakan Connect ()? Bagaimana anda menyambungkan komponen React ke kedai Redux menggunakan Connect ()? Mar 21, 2025 pm 06:23 PM

Artikel membincangkan penyambungan komponen reaksi ke kedai redux menggunakan Connect (), menerangkan MapStateToprops, MapdispatchToprops, dan kesan prestasi.

Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Mar 19, 2025 pm 04:10 PM

Artikel membincangkan menghalang tingkah laku lalai dalam pengendali acara menggunakan kaedah pencegahanDefault (), faedahnya seperti pengalaman pengguna yang dipertingkatkan, dan isu -isu yang berpotensi seperti kebimbangan aksesibiliti.

Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Mar 19, 2025 pm 04:16 PM

Artikel ini membincangkan kelebihan dan kekurangan komponen terkawal dan tidak terkawal dalam React, yang memberi tumpuan kepada aspek seperti ramalan, prestasi, dan kes penggunaan. Ia menasihatkan faktor -faktor yang perlu dipertimbangkan ketika memilih di antara mereka.

See all articles