Proxy 프록시

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

프록시는 타겟이 되는 객체의 기본동작을 중간에서 가로채 대신 수행.

 

Parameters

target: 대신(프록시)할 원본 객체(target!)
handler: proxy가 가로챌 수 있는 것들. 핸들러가 비어있다면 대신 수행하는 것이 없다는 것이므로 그냥 원본 객체를 투명하게 감싸고 있는 것처럼 동작.

 

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

/* --- */

console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone

 

Handlers

property

• handler.get()
• handler.set()
• handler.deleteProperty()
• handler.has() : in 연산자가 작동할 때

 

Method

• handler.apply() : 함수를 호출할 때
• handler.construct() : new 연산자가 작동할 때

 

Object

• handler.defineProperty()
• handler.getOwnPropertyDescriptor()
• handler.getPrototypeOf()
• handler.isExtensible()
• handler.ownKeys()
• handler.preventExtensions()
• handler.setPrototypeOf()

 

get 예시

 

target : 원본 객체(target object)
prop : get의 대상이 되는 property
receiver : proxy 혹은 proxy를 상속한 객체. this.

 

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler3 = {
  get(target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
};

const proxy3 = new Proxy(target, handler3);

console.log(proxy3.message1); // hello
console.log(proxy3.message2); // world