자바스크립트 프록시: 소개

JS는 진정한 객체 지향 프로그래밍 언어가 아닙니다. 따라서 읽기 및 쓰기 중에 개체 속성 값 유효성 검사를 시행하고 작업을 수행하고, 속성을 비공개로 정의하고, 값의 변경 사항을 감지하는 것과 같은 요구 사항을 충족하는 것은 어려울 수 있습니다. setter 또는 getter를 사용하여 기본값을 설정하거나 유효성 검사에서 오류를 발생시키는 등 위에서 언급한 문제를 해결하는 방법이 있습니다. 그러나 이러한 문제를 처리하는 보다 편리한 방법은 프록시 개체를 사용하는 것입니다.

프록시는 많은 개발자가 모르는 Javascript의 숨겨진 보석 중 하나입니다. 프록시 개체는 개체의 동작을 제어할 수 있는 가상화 인터페이스입니다. 개체의 기본 작업에 대한 사용자 지정 동작을 정의할 수 있습니다. 더 나은 방법으로 프록시를 이해하기 위해 예를 들어 봅시다.

아래와 같이 항목을 살펴보겠습니다.

let item = {
    id: 1231,
    name: 'Stock',
    price: 136
}

우리는 이 아이템을 판매하고 싶지만 조건은 판매 가격이 100 이상이어야 한다는 것입니다. 존재하지 않습니다. 또한 id를 사유 재산으로 정의하려고 합니다.

get, set 또는 속성 조회를 수행하는 동안 사용자 지정 논리를 작성하여 이 문제를 쉽게 해결할 수 있습니다. JS Proxy 개체가 여기서 정확히 도움이 됩니다. 이를 통해 JS 개체의 기본 작업에 사용자 지정 동작을 추가할 수 있습니다.

Proxy 객체를 생성하기 위해 Proxy 생성자를 사용하고 두 개의 매개변수(target 및 handler)를 전달합니다. 프록시 개체 정의:

let proxy = new Proxy(target, handler);

대상은 프록시를 사용하여 가상화되고 사용자 지정 동작을 추가하는 개체입니다. 여기서 item 개체가 대상입니다.

핸들러는 사용자 지정 동작을 정의하는 개체입니다. 핸들러 객체 컨테이너는 트랩입니다.

트랩은 대상 객체의 속성에 대한 액세스를 핸들러 객체에 제공하는 메서드입니다. 트랩은 선택 사항입니다. 트랩이 제공되지 않으면 대상 객체의 기본 메서드가 사용됩니다. get, set, has, isExtensible, defineProperty 등과 같은 다양한 유형의 트랩이 있습니다. 핸들러에서 이러한 모든 트랩을 사용하여 대상 개체에 대한 사용자 지정 동작을 정의할 수 있습니다.

let item = {
    id: 1231,
    name: 'Stock',
    price: 136
}

let handler = {
    // check while setting the value
    set: function(obj, prop, value) {
        if(prop === 'price') {
             if( !Number.isInteger(value)){
                throw new TypeError('Value passed is not a number');
            }
            if(value < 100){
                obj[prop]= 100;
                return true; 
            }
        }
        obj[prop]= value;
        return true; 
    },

    // check for no access to `id`
    // check for property which does not exist
    get: function(obj, prop) {
        if(prop == 'id'){
            throw new Error('Cannot access private property : id');
        }
        else {
            return prop in obj ?
            obj[prop] : new TypeError (prop + ' : property does not exist');
        }
    }
}

var itemProxy = new Proxy(item, handler);

코드를 이해합시다. Proxy 생성자를 사용하여 itemProxy라는 프록시를 만들고 item 및 handler를 전달했습니다.

핸들러에서 get 트랩을 사용하여 객체에 속성이 있는지 여부를 확인합니다. 또한 ID를 사유 재산으로 강제하여 액세스할 수 없도록 했습니다.
처리기에서 set 트랩을 사용하여 전달된 속성이 가격인지, 할당에 전달되는 값이 정수인지 확인하고 값 100을 다음과 같이 할당하는 수정자를 넣습니다. 가격이 100 미만인 경우 기본값입니다.

console.log(itemProxy.price); // 136
itemProxy.price = 45; 
console.log(itemProxy.price); // 100

유사한 방식으로 우리는 나중에 논의할 개체 속성 값의 변경 사항을 감지하는 처리기를 정의할 수 있습니다.

이 기사가 프록시를 이해하는 데 도움이 되었기를 바랍니다. 자세한 내용은 MDN 문서를 참조하십시오.

일반적으로 Javascript, 웹 최적화, Vue.js, React 및 Frontend에 대해 읽는 것을 좋아합니까? 더 많은 것을 기대해 주세요.

연결하시겠습니까? , , GitHub에서 나를 찾을 수 있습니다.