Proxy와 Reflect

김수정·2020년 5월 13일
0
post-custom-banner

Proxy란?

특정 객체를 감싸서 객체에 가해지는 작업을 중간에서 가로채는 객체.

let proxy = new Proxy(target, handler)

target - 감싸는 객체. 함수도 가능
handler - 동작을 가로채는 메서드인 trap이 담긴 객체. 프락시 설정하는 곳. trap이 없으면 target이 작업을 직접 실행함.

let dictionary = {
  'Hello': '안녕하세요',
  'Bye': '안녕히 가세요'
};

dictionary = new Proxy(dictionary, {
  get(target, phrase) { // 프로퍼티를 읽기를 가로챕니다.
    if (phrase in target) { // 조건: 사전에 구절이 있는 경우
      return target[phrase]; // 번역문을 반환합니다
    } else {
      // 구절이 없는 경우엔 구절 그대로를 반환합니다.
      return phrase;
    }
  }
});

// 사전을 검색해봅시다!
// 사전에 없는 구절을 입력하면 입력값이 그대로 반환됩니다.
alert( dictionary['Hello'] ); // 안녕하세요
alert( dictionary['Welcome to Proxy']); // Welcome to Proxy (입력값이 그대로 출력됨)

proxy로 감싼 이후에 원래 target 객체를 참조하는 코드가 없어야합니다!

Reflect

리플렉트는 프록시 생성을 간단화한 내장객체입니다.
프록시 trap과 동일하게 사용할 수 있고, 이점이 몇 개 더 있지만... 사용하게 될 때 더 파보겠습니다...

let user = {
  name: "John",
};

user = new Proxy(user, {
  get(target, prop, receiver) {
    alert(`GET ${prop}`);
    return Reflect.get(target, prop, receiver); // (1)
  },
  set(target, prop, val, receiver) {
    alert(`SET ${prop}=${val}`);
    return Reflect.set(target, prop, val, receiver); // (2)
  }
});

let name = user.name; // shows "GET name"
user.name = "Pete"; // shows "SET name=Pete"
profile
정리하는 개발자
post-custom-banner

0개의 댓글