JavaScript의 프록시 객체

프록시 객체는 얼마 전까지만 해도 나에게 미지의 영역이었습니다. TikTok에서 사용 방법을 설명하라는 요청을 받기 전까지는 들어본 적이 없었습니다. 프록시 개체를 만드는 방법과 사용 방법에 대해 읽는 데 시간을 보냈습니다. 프록시 개체를 사용하는 방법에 대한 포괄적인 가이드가 되지 않도록 이 간략한 내용을 유지하기 위해 최선을 다할 것입니다. 그러나 이것은 몇 가지 예를 제공할 뿐만 아니라 이를 사용할 수 있는 몇 가지 기본 방법을 보여줍니다.

프록시 개체 만들기

프록시 개체를 만들려면 먼저 대상 개체와 처리기 개체의 두 가지가 필요합니다. 대상은 프록시를 만들고자 하는 개체이며 핸들러는 변경할 동작과 변경 방법을 정의하는 위치입니다. 이러한 두 개체를 모두 정의한 후 target 및 handler를 이름을 지정한 것으로 대체하는 변수 세트new Proxy(target, handler)를 만들어 프록시를 만들 수 있습니다.

const target = {
  greetingOne: "hello",
  greetingTwo: "world",
};

const handler = {};

const proxy = new Proxy(target, handler);

지금은 핸들러를 비워 두었습니다. 즉, 동작이 변경되지 않습니다. 이것은 그다지 유용하지 않으므로 다음으로 프록시의 일부 동작을 변경할 수 있는 방법을 살펴보겠습니다.

Get 메서드 변경

greetingTwo가 'world'와 같은 경우 프록시target.greetingTwo를 'dev.to'로 변경하기를 원한다고 가정해 보겠습니다. 이를 위해 핸들러 개체에서 get 메서드를 재정의하여 정상적인 동작을 덮어씁니다. target, prop 및 receiver를 get() 함수에 전달한 다음 해당 매개 변수를 사용하여 동작을 변경해야 합니다.

const target = {
  greetingOne: "hello",
  greetingTwo: "world",
};

const handler = {
  get(target, prop, receiver) {
    if (prop === "greetingTwo") {
      return "dev.to";
    }
    return Reflect.get(...arguments);
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.greetingTwo); // dev.to

Reflect를 사용하면 일부 접근자에 대한 원래 동작을 유지하고 변경하려는 값만 변경할 수 있습니다.

설정 방법 변경

객체에서 특정 값만 유효하게 하려면 어떻게 해야 합니까? 이를 달성하기 위해 핸들러에서 set()를 사용할 수 있습니다. 이번에는 개체, 소품 및 값을 전달하고 매개 변수를 사용하여 데이터가 유효한지 확인합니다.

const target = {
  value: 1,
};

const handler = {
  set(obj, prop, value) {
    if (prop === "value" && value < 1) {
      console.log("value cannot be lower than 1");
      // handle error
    } else {
      return Reflect.set(...arguments);
    }
  },
};

const proxy = new Proxy(target, handler);

proxy.value = 0; // 'value cannot be lower than 1'
console.log(proxy.value); // 1

proxy.value = 3;
console.log(proxy.value); // 3

다시 말하지만 Reflect를 사용하면 원하는 경우 정상적인 동작을 유지할 수 있습니다. proxy.value를 1보다 작은 숫자로 설정하려고 하면 경고가 콘솔에 기록되고 값이 설정되지 않습니다. 1 이상의 값은 여전히 ​​유효합니다.

다른 방법 가로채기

이 게시물을 짧고 간결하게 유지하기 위해 각 개별 핸들러 트랩을 다루지는 않을 것입니다. 11개가 더 있지만 몇 개만 보여드리겠습니다. MDN에는 그들 모두에 대한 예제가 있으며 더 많은 예제와 더 자세한 설명을 찾고 있다면 문서를 빠르게 읽을 것을 권장합니다.

apply()

apply()를 사용하면 함수 호출이 트랩됩니다.

함수를 대상 개체로 사용하고 다음과 같이 apply()를 호출합니다.

  apply: function(target, thisArg, argList){}

기존 함수에 추가하여 함수 작동 방식을 변경할 수 있습니다.

construct()

construct(target, args)를 사용하면 'new' 키워드가 트랩됩니다.

그런 다음 새 개체 구성 동작을 변경할 수 있습니다

.

has()

has(target, key)를 사용하는 것은 in 연산자

의 함정입니다.

그러면 다음과 같이 in 연산자를 통해 키에 액세스하는 방식의 동작을 변경할 수 있습니다.

  if (key === "keyOne") {
    return false;
  }
  return key in target;

deleteProperty()

deleteProperty(target, property)를 사용하면 delete 연산자

가 트랩됩니다.

이렇게 하면 속성이 삭제되는 방식을 변경하여 조건을 설정할 수 있습니다.

  delete proxy.keyOne; // gets trapped in the handler object

이 게시물에서는 그렇게 할 것입니다. 질문이 있으시면 의견에 최선을 다해 답변해 드리겠습니다.