Apakah yang termasuk fungsi cangkuk JavaScript?

Fungsi cangkuk JavaScript termasuk jenis berikut: sebelum, selepas dan sekitar.

1. sebelum cangkuk

Fungsi sebelum cangkuk dilaksanakan sebelum pelaksanaan fungsi utama Fungsinya adalah untuk memintas pelaksanaan fungsi utama dan melaksanakan beberapa pra-. pemprosesan di atasnya. Cangkuk sebelum dilaksanakan dengan melaksanakan fungsi sebelum memanggil fungsi utama.

Berikut ialah contoh kod:

function before(fn, beforeFn) {
  return function() {
    beforeFn.apply(this, arguments);
    return fn.apply(this, arguments);
  }
}

function mainFunc(param) {
  console.log(`执行主函数，参数为${param}`);
}

const beforeFunc = function(param) {
  console.log(`before钩子函数，参数为${param}`);
}

const newFunc = before(mainFunc, beforeFunc);

newFunc('test');

Dalam kod sampel di atas, kami mentakrifkan fungsi sebelum, yang menerima dua parameter fn dan sebelumFn, serta mengembalikan fungsi baharu. Fungsi baharu ini mula-mula melaksanakan fungsi beforeFn secara dalaman, dan kemudian melaksanakan fungsi utama fn. Dengan melaksanakan fungsi sebelum sebelum fungsi utama dilaksanakan, kita boleh melaksanakan fungsi cangkuk sebelum.

2. after hook

Fungsi after hook dilaksanakan selepas fungsi utama dilaksanakan Fungsinya adalah untuk memintas nilai pulangan bagi fungsi utama dan melaksanakan operasi tertentu. Cangkuk selepas dilaksanakan dengan melaksanakan fungsi selepas memanggil fungsi utama.

Berikut ialah contoh kod:

function after(fn, afterFn) {
  return function() {
    const res = fn.apply(this, arguments);
    afterFn.apply(this, arguments);
    return res;
  }
}

function mainFunc() {
  console.log(`执行主函数`);
  return 'test';
}

const afterFunc = function(res) {
  console.log(`after钩子函数，返回值为${res}`);
}

const newFunc = after(mainFunc, afterFunc);

newFunc();

Dalam kod sampel di atas, kami mentakrifkan fungsi selepas yang menerima dua parameter fn dan afterFn serta mengembalikan fungsi baharu. Secara dalaman, fungsi baharu ini mula-mula melaksanakan fungsi utama fn, memperoleh nilai pulangan, kemudian melaksanakan fungsi afterFn, dan akhirnya mengembalikan nilai pulangan. Dengan melaksanakan fungsi selepas selepas fungsi utama dilaksanakan, kita boleh merealisasikan fungsi cangkuk selepas.

3. sekitar cangkuk

Fungsi cangkuk sekeliling ialah gabungan cangkuk sebelum dan selepas cangkuk, yang boleh beroperasi sebelum dan selepas pelaksanaan fungsi utama. Cangkuk sekeliling dilaksanakan dengan melaksanakan dua fungsi sebelum dan selepas memanggil fungsi utama.

Berikut ialah contoh kod:

function around(fn, beforeFn, afterFn) {
  return function() {
    beforeFn.apply(this, arguments);
    const res = fn.apply(this, arguments);
    afterFn.apply(this, arguments);
    return res;
  }
}

function mainFunc(param) {
  console.log(`执行主函数，参数为${param}`);
  return 'test';
}

const beforeFunc = function(param) {
  console.log(`before钩子函数，参数为${param}`);
}

const afterFunc = function(res) {
  console.log(`after钩子函数，返回值为${res}`);
}

const newFunc = around(mainFunc, beforeFunc, afterFunc);

newFunc('test');

Dalam kod sampel di atas, kami mentakrifkan fungsi sekeliling yang menerima tiga parameter fn, sebelumFn dan selepasFn serta mengembalikan fungsi baharu. Secara dalaman, fungsi baharu ini mula-mula melaksanakan fungsi beforeFn, kemudian melaksanakan fungsi utama fn, memperoleh nilai pulangan, dan akhirnya melaksanakan fungsi afterFn. Dengan melaksanakan fungsi sebelum dan selepas sebelum dan selepas pelaksanaan fungsi utama, kita boleh melaksanakan fungsi cangkuk sekeliling.

Ringkasan

Fungsi cangkuk JavaScript ialah teknik pengaturcaraan yang sangat biasa, yang membolehkan kami mengawal aliran pelaksanaan program dengan lebih baik. Fungsi cangkuk membolehkan kami melakukan beberapa operasi sebelum dan selepas pelaksanaan fungsi utama, seperti pengesahan input, pengelogan, statistik prestasi, dsb. Dalam proses pembangunan sebenar, kita boleh menggunakan fungsi cangkuk ini secara fleksibel untuk mencapai kesan pengaturcaraan yang lebih baik.

Atas ialah kandungan terperinci Apakah yang termasuk fungsi cangkuk JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!