JavaScript 데코레이터 패턴과 프록시 패턴의 기능 차이점에 대한 자세한 예

데코레이팅된 패턴은 이 클래스에서 파생된 다른 개체에 영향을 주지 않고 개체에 일부 추가 책임을 동적으로 추가할 수 있습니다.

장식된 패턴은 하나의 물체를 다른 물체에 삽입하는데, 이는 실제로 이 물체가 다른 물체에 의해 포장되어 포장 체인을 형성하는 것과 같습니다.

원래 함수를 변경하지 않고 함수에 추가 함수를 추가하세요

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”

_getElementById는 전역 함수이므로 전역 함수가 호출될 때 이것은 창을 가리키고 document.getElementById의 this는 다음을 가리킬 것으로 예상됩니다. 문서.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!