JavaScript의 프록시 탐색: 실제 예제를 통한 고급 기능

JavaScript는 많은 흥미로운 기능을 제공하며, 가장 강력하면서도 덜 일반적인 기능 중 하나는 프록시 개체입니다. 이 도구를 사용하면 속성 액세스 또는 수정과 같은 다른 개체에 대한 작업을 가로챌 수 있는 개체를 만들 수 있습니다. 이 게시물에서는 프록시의 작동 방식, 사용법, getter 및 setter와 같은 다른 유사한 기능과의 차이점을 살펴보겠습니다.

---

프록시란 무엇입니까?

프록시는 다른 개체("대상"이라고 함)의 중개자 역할을 합니다. "처리기"를 통해 다양한 작업에 대해 프록시가 작동하는 방식을 정의할 수 있습니다. 이를 통해 기본 개체와 상호 작용하는 방법을 사용자 정의할 수 있습니다.

---

기본 구문

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

---

사용법 1: 속성 액세스 가로채기

사용자를 나타내는 객체가 있고 해당 속성에 액세스할 때 사용자 정의 동작을 제공하고 싶다고 가정해 보겠습니다.

const user = {
    name: 'Gabriel',
    age: 30
};

const handler = {
    get: function(target, prop) {
        if (prop in target) {
            return target[prop];
        } else {
            return 'Property not found';
        }
    }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

유사한 동작을 달성하기 위해 getter 사용을 고려할 수 있습니다.

const userWithGetters = {
    name: 'Gabriel',
    age: 30,
    getProperty(prop) {
        return this[prop] || 'Property not found';
    }
};

console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found

차이점은 프록시를 사용하면 속성 액세스뿐만 아니라 객체에 대한 모든 작업을 가로챌 수 있어 더 큰 유연성을 제공한다는 점입니다.

---

사용법 2: 속성 유효성 검사

사용자의 연령을 설정할 때 유효한 값만 허용된다고 가정해 보세요. 프록시가 빛나는 곳은 바로 여기입니다:

const person = {
    name: 'Ana'
};

const handler = {
    set: function(target, prop, value) {
        if (prop === 'age' && (value < 0 || value > 120)) {
            throw new Error('Age must be between 0 and 120');
        }
        target[prop] = value;
        return true;
    }
};

const personProxy = new Proxy(person, handler);

personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María

try {
    personProxy.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

setter를 사용하여 값을 확인할 수 있습니다.

const personWithSetters = {
    _age: 0,
    name: 'Ana',
    set age(value) {
        if (value < 0 || value > 120) {
            throw new Error('Age must be between 0 and 120');
        }
        this._age = value;
    },
    get age() {
        return this._age;
    }
};

try {
    personWithSetters.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

프록시와의 차이점은 각 속성에 대해 getter 및 setter를 정의할 필요 없이 모든 속성에 보다 일반적으로 유효성 검사를 적용할 수 있다는 것입니다.

---

사용법 3: 변경 사항 모니터링

객체의 변경 사항을 추적하고 싶다고 상상해 보세요. 프록시를 사용하면 이 작업을 쉽게 수행할 수 있습니다.

const data = {};

const handler = {
    set: function(target, prop, value) {
        console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
        target[prop] = value;
        return true;
    }
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

관찰 가능한 시스템에서는 변경 사항을 알리기 위해 특정 패턴을 정의해야 합니다. 프록시를 사용하면 간단히 작업을 가로챌 수 있습니다.

// Simulating a basic observable
class Observable {
    constructor(data) {
        this.data = data;
        this.listeners = [];
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    notify() {
        this.listeners.forEach(listener => listener(this.data));
    }
}

차이점은 프록시를 사용하면 변경 사항을 가로채고 대응하는 데 더 직접적이고 덜 장황한 접근 방식이 가능하다는 것입니다. Observable을 사용하면 알림을 수동으로 관리해야 합니다.

---

결론

JavaScript의 프록시 개체는 개체에 대한 작업을 가로채서 재정의할 수 있는 매우 강력한 도구입니다. 더 제한적이고 더 많은 코드가 필요한 getter 및 setter와 달리 프록시는 객체 검증, 모니터링 및 조작에 대한 유연성과 보다 깔끔한 접근 방식을 제공합니다.

JavaScript에서 개체 작업 능력을 향상시키고 싶다면 프록시를 탐색해 보는 것이 좋습니다!

위 내용은 JavaScript의 프록시 탐색: 실제 예제를 통한 고급 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!