본 글은 주로 자바스크립트 데코레이터 기능(Decorator)을 소개하고, 자바스크립트 데코레이터 기능(Decorator)의 기능과 구현, 사용법을 예시 형태로 분석한 내용이 필요한 친구들은 이 글을 참고하시면 됩니다
자바스크립트 데코레이터(Decorator) 기능에 대한 예제입니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
데코레이터 기능(Decorator)은 런타임 중에 객체에 특정 기능, 책임 등을 동적으로 추가하는 데 사용됩니다. 상속을 통해 객체의 기능을 확장하는 것에 비해 데코레이터는 더 유연합니다. 첫째, 특정 기능 포인트를 구현하기 위해 객체를 하드코어하게 상속하는 대신 객체에 대한 데코레이터를 동적으로 선택할 수 있습니다. 둘째: 상속 방법은 많은 수의 하위 클래스로 이어질 수 있으며 이는 단일 기능 점수를 추가하는 것만으로는 약간 중복됩니다.
아래에는 일반적으로 사용되는 몇 가지 데코레이터 함수 예제가 나와 있습니다. 관련 코드는 github을 확인하세요.
1 동적으로 온로드 리스닝 기능 추가
function 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);
2 사전 실행 기능과 사후 실행 기능
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
3 함수 실행 시간 계산
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);
참고: 여기서는 ES2015(ES6) 구문을 사용했습니다. 관심이 있으시면 ES6에 대한 이전 관련 내용을 확인하실 수 있습니다.
물론 데코레이터 기능이 이러한 용도에만 국한되지는 않습니다. Tmall에서 사용하는 Nodejs 프레임워크 Koa는 데코레이터 기능과 ES2015 Generator를 기반으로 합니다. 이 글이 여러분이 더욱 우아한 JS 코드를 작성하는 출발점이 되기를 바랍니다.
위 내용은 JavaScript의 함수 데코레이터 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!