JavaScript의 프록시를 이해하고 API를 반영합니다

프록시 및 반사 API는 객체 작업을 가로 채고 사용자 정의하기 위해 JavaScript에서 사용되는 강력한 도구입니다. 1. 프록시는 대상 객체를 래핑하고 "트랩"을 정의하여 설정, 로그, 검증, 읽기 전용 제어와 같은 함수를 구현하는 것과 같은 작업을 차단합니다. 2. 반사는 기본 동작의 일관성과 정확성을 보장하고 코드 유지 관리를 개선하기 위해 프록시 트랩에 해당하는 방법을 제공합니다. 3. 실제 응용 프로그램에는 VUE 3 응답 시스템, 데이터 검증, 디버그 로그, 불변의 객체 및 API 시뮬레이션이 포함됩니다. . 5. 합리적으로 사용하면 효율적이고 디지털화 가능하며 반응성이있는 시스템을 구축 할 수 있지만 코드를 이해하기 어렵게하려면 과도한 사용을 피해야합니다.

JavaScript의 Proxy 및 Reflect API는 ES6에 도입 된 강력한 기능으로 개발자가 기본 객체 작업을 가로 채고 사용자 정의 할 수 있습니다. 매일 사용되지 않을 수도 있지만 이해하면 객체 동작을 더 깊이 제어 할 수 있으며 검증, 로깅 및 반응 형 프로그래밍과 같은 고급 패턴을 가능하게합니다.

프록시 API는 무엇입니까?

Proxy 사용하면 속성 읽기, 값 쓰기 또는 속성이 있는지 확인하는 것과 같은 기본 작업을 가로 채고 재정의 할 수있는 객체 주위에 래퍼를 만들 수 있습니다. 그것을 물체의 "게이트 키퍼"로 생각하십시오.

기본 구문 :

 const 프록시 = 새로운 프록시 (대상, 핸들러);

• target : 포장 할 원래 개체.
• handler : 인터셉트 할 작업을 정의하는 객체 ( "트랩").

예 : 속성 액세스 로깅

 const user = {이름 : 'Alice', Age : 30};

const proxy = new proxy (user, {
  get (Target, Property) {
    console.log (`속성 받기 : $ {property}`);
    반환 대상 [속성];
  },
  set (대상, 속성, 가치) {
    console.log (`설정 속성 : $ {property} = $ {value}`);
    대상 [속성] = 값;
    진실을 반환하십시오. // 성공적인 할당을 위해 True를 반환해야합니다
  }
});

프록시. 이름; // 로그 : 속성 가져 오기 : 이름
proxy.age = 31; // 로그 : 속성 설정 : age = 31

이것은 디버깅, 검증 또는 관찰 가능성을 구축하는 데 유용합니다.

일반적인 프록시 트랩

다음은 핸들러에서 자주 사용되는 트랩입니다.

• get(target, property) - 속성을 가로 채 웁니다.
• set(target, property, value) - 속성을 가로 채 웁니다.
• has(target, property) - 연산자 (예 : 'name' in obj ) in 가로 채기.
• deleteProperty(target, property) - intercepts delete obj.prop .
• apply(target, thisArg, args) - 포장 기능에 사용됩니다.
• construct(target, args) - new 연산자를 가로 채립니다.

예 : set 트랩을 사용한 유효성 검사

 const validatedUser = new Proxy ({}, {
  set (대상, 속성, 가치) {
    if (property === 'age'&& typeof value! == 'number') {
      새로운 TypeError를 던지십시오 ( '나이는 숫자 여야합니다');
    }
    if (property === 'name'&& typeof value! == 'string') {
      새 typeerror를 던지십시오 ( '이름은 문자열이어야합니다');
    }
    대상 [속성] = 값;
    진실을 반환하십시오.
  }
});

ValidatedUser.name = 'bob'; // 좋아요
ValidatedUser.age = '30'; // TypeError를 던지십시오

이를 통해 객체 수준에서 데이터 무결성을 시행 할 수 있습니다.

반사 API는 무엇입니까?

Reflect JavaScript 작업을 가로 채기위한 메소드를 제공하는 내장 객체입니다. Proxy 와 함께 작동하도록 설계되었습니다. 모든 프록시 트랩의 경우 해당 Reflect 방법이 있습니다.

get 트랩에서 target[property] 에 수동으로 액세스하는 대신 Reflect.get() - 기본 동작을 일관성있게 유지하고 에지 케이스를 처리합니다.

반사를 사용하는 이유는 무엇입니까?

• 코드를 깨끗하고 예측 가능하게 유지합니다.
• this 바인딩을 올바르게 처리합니다.
• 객체 작업을 수행하는 기능적 방법을 제공합니다.

반사를 사용한 개선 된 프록시 :

 const safeobject = new proxy ({value : 42}, {
  get (Target, Property) {
    console.log (`액세스 : $ {property}`);
    return Reflect.get (대상, 속성);
  },
  set (대상, 속성, 가치) {
    console.log (`mutating : $ {property}`);
    return reflect.set (대상, 속성, 값);
  }
});

Reflect 사용하면 프록시가 명시 적으로 상정되지 않는 한 JavaScript의 기본 동작을 존중합니다.

실제 사용 사례

이 API는 학업 일뿐 만 아니라 실제 도구와 프레임 워크에 사용됩니다.

• VUE 3의 반응성 시스템 : Proxy 사용하여 호텔 액세스 및 업데이트를 감지하고 Object.defineProperty 대체합니다.
• 유효성 검사 라이브러리 : 유형 또는 범위 점검을 시행하기 위해 객체를 랩합니다.
• 디버깅 및 로깅 : 원래 코드를 수정하지 않고 개체 상호 작용을 모니터링합니다.
• 불변의 포장지 : set 에 오류를 던져 우발적 인 돌연변이를 방지합니다.
• API 조롱 : 동적 응답으로 물체를 시뮬레이션합니다.

예 : 읽기 전용 프록시

 readonly (target) {
  새로운 프록시를 반환합니다 (Target, {
    세트() {
      새 오류를 던지십시오 ( "읽기 전용 객체를 수정할 수 없습니다");
    },
    deleteproperty () {
      새 오류를 던지십시오 ( "읽기 전용 객체에서 삭제할 수 없습니다");
    }
  });
}

const config = readOnly ({api : 'https://api.example.com'});
config.api = '해킹'; // 오류가 발생합니다

Gotchas 및 모범 사례

• 성능 : 프록시는 오버 헤드를 추가합니다. 필요하지 않는 한 큰 물체를 감싸지 마십시오.
• 모든 객체를 동일하게 프록시 할 수있는 것은 아닙니다 . 배열과 같은 내장 객체에는 미묘한 동작이 있습니다.
• Reflect 일관되게 사용하십시오 : 함정을 더욱 신뢰할 수 있고 유지하기가 더 쉬워집니다.
• 프록시는 외부 물체 만 랩핑합니다 . 중첩 객체는 재귀 적으로 프록시하지 않으면 자동으로 보호되지 않습니다.

최종 생각

JavaScript의 Proxy 및 Reflect 메타 프로그래밍 기능을 개방합니다. 과도하게 사용하면 코드를 따라 가기가 더 어려울 수 있지만 깨끗한 추상화, 디버깅 도구 및 반응 시스템을 구축하는 데 매우 중요합니다.

현명하게 사용하면 강력하고 표현적인 코드를 쓸 수 있습니다.

기본적으로, 객체가 행동하는 방식을 관찰, 제어 또는 향상시켜야하는 경우 Proxy 와 Reflect 도달 할 도구입니다.

위 내용은 JavaScript의 프록시를 이해하고 API를 반영합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!