JavaScript에서 프록시 개체를 사용하는 방법-JS 튜토리얼-php.cn

JavaScript에서 프록시 개체를 사용하는 방법

Linda Hamilton

풀어 주다： 2024-11-01 06:52:30

원래의

972명이 탐색했습니다.

JavaScript의 객체는 사전처럼 간단한 키-값 쌍으로 복잡한 데이터를 정의할 수 있는 유용한 데이터 유형입니다. 때로는 JavaScript 객체의 기본 작동 방식을 변경하고 싶을 수도 있습니다. 여기서 프록시 개체가 도움이 됩니다. 이 글에서는 프록시 객체가 무엇인지, 왜 유용한지, 어떻게 사용하는지에 대해 논의하겠습니다.

프록시 객체란 무엇입니까?

Proxy Object가 무엇인지 이해하기 전에 Proxy라는 단어를 살펴보겠습니다. 프록시는 원본처럼 작동하지만 원본이 아닌 것을 의미합니다. 마찬가지로 프록시 개체는 원본 개체의 작동 방식을 가로채고 변경할 수 있는 원본 개체를 사용하여 생성된 개체입니다.

프록시 생성자는 두 개의 매개변수를 사용합니다

대상: 프록시를 생성하려는 개체
핸들러: 변경하거나 재정의하려는 작업이 포함된 개체

const proxyObject = new Proxy(target, handler)

로그인 후 복사

프록시 개체는 어떻게 작동하나요?

변경하려는 작업이 있는 핸들러로 프록시 개체를 생성하면 해당 작업을 가로채서 대상 개체에 대한 호출을 포착하고 해당 작업에 대해 정의한 사용자 지정 논리를 실행합니다.

트랩이라고 불리는 작업은 기본적으로 객체의 내부 메서드입니다. 그 중 일부는 다음과 같습니다.

받기
설정
속성 삭제

How to Use Proxy Objects in JavaScript

여기에서는 프록시 개체의 작동 방식을 보여주는 간단한 시각적 개체를 만들었습니다. 값에 액세스하거나 값을 설정하려고 하면 핸들러에 정의된 작업(트랩)을 가로채서 실행합니다.

알겠습니다. 프록시 객체의 내용과 방법이 명확했으면 좋겠습니다. 다음으로 프록시 개체가 유용한 이유를 보여주는 몇 가지 사용 사례에 대해 논의하겠습니다.

프록시 객체 사용 사례

벌채 반출

객체에서 속성에 액세스할 때마다 정보를 기록하는 시스템을 만들고 싶다고 가정해 보겠습니다.

const platform = {
  type: "peerlist.io",
  handle: "sachin87",
};

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    return target[key];
  },
});

// try to access the property
proxyPlatformObj.type;

// [Info]: Accessing type at 1729661722827

// 'peerlist.io'

로그인 후 복사

이는 매우 간단한 사용 사례이지만 로깅이 필요할 때 유용하며 더 고급 작업을 수행하도록 확장할 수 있습니다.

직접 사용할 수 없는 속성에 사용자가 액세스하도록 허용할 수도 있습니다. 예를 들어 위의 경우 사용자 핸들이 포함된 플랫폼의 전체 URL이 필요할 수 있습니다.

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    if (key === "url") {
      return `https://${target.type}/${target.handle}`;
    }
    return target[key];
  },
});

// try to access the url property
proxyPlatformObj.url;

// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'

로그인 후 복사

확인

또 다른 사용 사례는 값을 추가하기 전에 값을 확인하는 것입니다. 예를 들어, 핸들 값을 설정하기 전에 핸들 값을 확인하고 싶다고 가정해 보겠습니다. 두 가지 기본 조건을 검증하겠습니다.

소문자여야 합니다
영숫자도 가능합니다

const proxyObject = new Proxy(target, handler)

로그인 후 복사

Reflect.set(target, key, value)가 무엇인지 궁금하실 겁니다. 가로챌 수 있는 JavaScript 개체의 내부 메서드를 호출하기 위한 정적 메서드가 있는 네임스페이스 개체입니다. 모든 속성에 대한 유효성 검사를 원하지 않으면 Reflect 개체를 사용하여 기본 동작을 유지할 수 있습니다.

로깅과 유효성 검사 두 가지 사용 사례에 대해 이야기했지만 필요에 따라 다른 내부 방법을 가로챌 수도 있습니다.