Rumah > Artikel > hujung hadapan web > Mari kita bincangkan tentang corak hiasan fungsi biasa dalam JavaScript
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
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:
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
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
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:
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!