데코레이팅된 패턴은 이 클래스에서 파생된 다른 개체에 영향을 주지 않고 개체에 일부 추가 책임을 동적으로 추가할 수 있습니다.
장식된 패턴은 하나의 물체를 다른 물체에 삽입하는데, 이는 실제로 이 물체가 다른 물체에 의해 포장되어 포장 체인을 형성하는 것과 같습니다.
원래 함수를 변경하지 않고 함수에 추가 함수를 추가하세요
1. 원본 참조를 저장하세요
window.onload = function() { console.log(1); }; var _onload = window.onload || function() {}; window.onload = function() { _onload(); console.log(2); }
문제:
(1) 중간 변수를 유지해야 합니다
(2 ) window.onload의 예에서는 window.onload를 호출할 때와 마찬가지로 일반 함수 _onload를 호출할 때에도 window를 가리키기 때문에 이러한 문제가 발생하지 않습니다.
2. 이것은 하이재킹되었습니다:
var _getElementById = document.getElementById; document.getElementById = function(id) { console.log(1); return _getElementById(id); } return _getElementById(id); // 报错“Uncaught TypeError: Illegal invocation”
3. 납치된 문제 해결:
var _getElementById = document.getElementById; document.getElementById = function(id) { console.log(1); return _getElementById.call(document, id); }
AOP를 사용하여 함수 장식하기
/* 让新添加的函数在原函数之前执行(前置装饰)*/ Function.prototype.before = function(beforefn) { var _self = this; return function() { beforefn.apply(this, arguments); // 新函数接收的参数会被原封不动的传入原函数 return _self.apply(this, arguments); }; };
/* 让新添加的函数在原函数之后执行(后置装饰)*/ Function.prototype.after = function(afterfn) { var _self = this; return function() { var ret = _self.apply(this, arguments); afterfn.apply(this, arguments); return ret; }; };
document.getElementById = document.getElementById.before(function() { console.log(1); });
오염을 일으키는 프로토타입을 피하세요
var before = function(fn, beforefn) { return function() { beforefn.apply(this, arguments); return fn.apply(this, arguments); }; }; var after = function(fn, afterfn) { return function() { var ret = fn.apply(this, arguments); afterfn.apply(this, arguments); return ret; }; }; document.getElementById = before(document.getElementById, function(){ console.log(1); });
데코레이터 패턴과 프록시 패턴
차이점:
(1) 프록시 모드: 직접 로컬 액세스가 불편하거나 요구 사항을 충족하지 못하는 경우 이 온톨로지를 대체할 수 있는 모드를 제공합니다. 주요 기능을 로컬로 정의하면 에이전트는 이에 대한 액세스를 제공 또는 거부하거나 온톨로지에 액세스하기 전에 몇 가지 추가 작업을 수행합니다. (온톨로지와 동일한 작업을 수행합니다.)
(2) 데코레이터 모드: 객체에 동작을 동적으로 추가합니다. (처음부터 객체의 모든 기능을 결정할 수는 없으며 실제로 객체에 새로운 책임과 행동을 추가할 수는 없습니다)
위 내용은 JavaScript 데코레이터 패턴과 프록시 패턴의 기능 차이점에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!