Rumah  >  Artikel  >  hujung hadapan web  >  Mari kita bincangkan tentang corak hiasan fungsi biasa dalam JavaScript

Mari kita bincangkan tentang corak hiasan fungsi biasa dalam JavaScript

PHPz
PHPzasal
2023-04-25 09:12:02685semak imbas

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:

  • 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

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:

  • 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:
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