[J.S] js에서의 프록시(Proxy)!

프록시(Proxy)

•  Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있다.

프록시란??

• Proxy 객체를 사용하면 원래 Object 대신 사용할 수 있는 객체를 만들지만, 이 객체의 속성 가져오기, 설정 및 정의와 같은 기본 객체 작업을 재 정의 할 수 있다.
• 프록시 객체는 일반적으로 속성 액세스를 기록하고 입력의 유효성을 검사하고 형식을 지정하거나, 삭제하는데 사용된다.
• 두개의 매개변수를 사용하여 Proxy 를 생성한다.
  • target : 프록시할 원본 객체
  • handler : 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체

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

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

//핸들러가 비어 있기 때문에 이 프록시는 원래 대상처럼 작동
console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone

 

• 프록시를 커스텀 하기 위해 처리기 객체에 함수를 정의함
• 대상 객체의 속성 엑세스를 가로채는 get() 처리기를 제공함
• 처리기 함수는 대상 객체에 대한 호출을 잡아내기 때문에 트랩(traps) 이라고도 부른다
• 아래 handler2 에 있는 간단한 트랩은 모든 속성 접근자를 재정의 한다.

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

const handler2 = {
  get(target, prop, receiver) {
    return "world";
  },
};

const proxy2 = new Proxy(target, handler2);

console.log(proxy2.message1); // world
console.log(proxy2.message2); // world

 

• Reflect 클래스의 도움으로 일부 접근자에게 원래 동작을 제공하고 다른접근자를 재정의 할 수 있다.

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

 

• ex) 속성 이름이 객체에 없으면 숫자 36을 기본값으로 반환, get() 처리기를 사용한다.

const handler = {
  get(obj, prop) {
    return prop in obj ? obj[prop] : 36;
  },
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b);
//  1, undefined

console.log("c" in p, p.c);
//  false, 36