Cet article présente principalement la fonction de décorateur JavaScript (Decorator), et analyse la fonction, l'implémentation et l'utilisation de la fonction de décorateur JavaScript (Decorator) sous forme d'exemples. Les amis dans le besoin peuvent se référer à cet article
L'exemple décrit la fonction décorateur Javascript (Decorator). Partagez-le avec tout le monde pour votre référence, les détails sont les suivants : La fonction Décorateur (Decorator) est utilisée pour ajouter dynamiquement certaines fonctions, responsabilités, etc. à l'objet pendant l'exécution. Par rapport à l'extension des fonctions des objets par héritage, les décorateurs sont plus flexibles. Premièrement, nous pouvons sélectionner dynamiquement un décorateur pour l'objet au lieu d'hériter de manière hardcore de l'objet pour implémenter un certain point de fonction. Deuxièmement : la méthode d'héritage peut conduire à un grand nombre de sous-classes, ce qui est un peu redondant juste pour ajouter un seul point de fonction. Voici plusieurs exemples de fonctions de décorateur couramment utilisées. Veuillez consulter github pour les codes associés. 1 Ajouter dynamiquement une fonction d'écoute en chargefunction addLoadEvent(fn) { var oldEvent = window.onload; if(typeof window.onload != 'function') { window.onload = fn; }else { window.onload = function() { oldEvent(); fn(); }; } } function fn1() { console.log('onloadFunc 1'); } function fn2() { console.log('onloadFunc 2'); } function fn3() { console.log('onloadFunc 3'); } addLoadEvent(fn1); addLoadEvent(fn2); addLoadEvent(fn3);
Function.prototype.before = function(beforfunc) { var self = this; var outerArgs = Array.prototype.slice.call(arguments, 1); return function() { var innerArgs = Array.prototype.slice.call(arguments); beforfunc.apply(this, innerArgs); self.apply(this, outerArgs); }; }; Function.prototype.after = function(afterfunc) { var self = this; var outerArgs = Array.prototype.slice.call(arguments, 1); return function() { var innerArgs = Array.prototype.slice.call(arguments); self.apply(this, outerArgs); afterfunc.apply(this, innerArgs); }; }; var func = function(name){ console.log('I am ' + name); }; var beforefunc = function(age){ console.log('I am ' + age + ' years old'); }; var afterfunc = function(gender){ console.log('I am a ' + gender); }; var beforeFunc = func.before(beforefunc, 'Andy'); var afterFunc = func.after(afterfunc, 'Andy'); beforeFunc('12'); afterFunc('boy');
I am 12 years old I am Andy I am Andy I am a boy
function log(func){ return function(...args){ const start = Date.now(); let result = func(...args); const used = Date.now() - start; console.log(`call ${func.name} (${args}) used ${used} ms.`); return result; }; } function calculate(times){ let sum = 0; let i = 1; while(i < times){ sum += i; i++; } return sum; } runCalculate = log(calculate); let result = runCalculate(100000); console.log(result);
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!