JS - Proxy

JS에서 특정 객체를 Wrapping 하여 기본 기능을 수정할 수 있는 Proxy 객체에 대한 메모

Proxy 객체?

객체의 기본 기능을 수정할 수 있다고 하였지만 모든 기능을 수정할 수 있는 것은 아니며, 기존 객체의 메서드를 오버라이드하여 기존 동작과 다르게 수행된다고 생각하면 된다.

아래 사진의 13개의 기능에 대하여 접근이 가능하다.

사진 출처: ECMA 사이트

기본적으로 아래와 같은 형태를 지니고 있다.

/**
 * @target Wrapping할 객체
 * @handler 기능을 변경할 메서드 정의 모음
 */
const obj = new Proxy(target, handler);

간단 예제

const target = {
  age: 9999,
  score: 99,
};
const dumpingHandler = {
  get(target, key) {
    return target[key] + 1000;
  },
};
const obj = new Proxy(target, dumpingHandler);
console.log(obj.score); // 1099

위에 예제는 정말 간단한 예제이고 handler 안에 정의되는 메서드(?)들을 trap 이라고 한다.

Proxy.revocable()

Proxy 객체를 더 이상 사용하지 못 하도록 변경가능한 객체를 생성해주는 메서드이다.
생성하는 방법이 크게 다르지는 않으나 생성된 객체에서 proxy 프로퍼티로 접근해야 한다. revoke() 를 호출할 경우 해당 프록시 객체를 사용할 수 없는 상태로 변경된다.

const target = {
  age: 9999,
  score: 99,
};
const dumpingHandler = {
  get(target, key) {
    return target[key] + 1000;
  },
};
const obj = Proxy.revocable(target, dumpingHandler);
console.log(obj.proxy.score); // 1099

obj.revoke();

try {
  console.log(obj.proxy.age); // error 발생
} catch (error) {
  console.log(error);
}

⚠️ Proxy 객체를 만들 때 사용된 target이 null이 된다고 해서 Proxy 객체의 target이 null 되지 않는다.