자바스크립트 프록시

JavaScript 프록시는 다른 개체를 래핑하고 대상 개체의 기본 작업을 가로채는 개체입니다.

통사론:

let proxy = new Proxy(target, handler);

target  - 래핑할 객체이며 함수를 포함하여 무엇이든 될 수 있습니다.

handler  - 프록시 구성: "트랩"이 있는 개체, 작업을 가로채는 메서드. – 예를 들어 get   target 의 속성을 읽기 위한 트랩 , set   target 에 속성을 쓰기 위한 트랩 등.

user라는 객체를 정의하여 간단한 예를 살펴보겠습니다.

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

// defining a handler function
const handler = {}

// now, create a proxy
const userProxy = new Proxy(user, handler);

userProxy 개체는 user 개체를 사용하여 데이터를 저장합니다. userProxy는 user 개체의 모든 속성에 액세스할 수 있습니다.

출력을 보자:

console.log(userProxy.firstName); // suprabha
console.log(userProxy.lastName); // supi

원래 개체user를 수정하면 변경 사항이 userProxy에 반영됩니다.

user.firstName = 'sam';
console.log(userProxy.firstName); // sam

마찬가지로 userProxy 개체의 변경 사항은 원래 개체user에 반영됩니다.

proxyUser.lastName = 's';
console.log(user.lastName); // s

프록시에는 메서드가 있습니다. 여기서는 가장 중요한 메서드를 다룹니다.

얻다

세트

신청

1️⃣ 다음을 얻습니다.

handler.get()  메소드는 속성 값을 가져오기 위한 함정입니다.

또한 get를 사용하여 변경할 수 있습니다.

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

// defining a handler function
const handler = {
    get(target, prop, receiver) {
    return "sumi";
  }
}

// now, create a proxy
const userProxy = new Proxy(user, handler);

console.log(userProxy.firstName) // sumi
console.log(userProxy.lastName)  // sumi

현재로서는 사용자 개체에 fullUserName가 없으므로 get 트랩을 사용하여 프록시에서 생성해 보겠습니다.

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

const handler = {
    get(target, property) {
        return property === 'fullUserName' ?
            `${target.firstName} ${target.lastName}` :
            target[property]
    }
};

const userProxy = new Proxy(user, handler)

console.log(userProxy.fullUserName) // suprabha supi

2️⃣세트:

set 트랩은 target 개체의 속성이 설정될 때 동작을 제어합니다.

따라서 set 트랩에서 수행할 수 있도록 몇 가지 조건을 추가해야 한다고 가정해 보겠습니다.

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
        age: 15
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('Age should be in number!');
            }
            if (value < 18) {
                throw new Error('The user must be 18 or older!')
            }
        }
        target[property] = value;
    }
};

const userProxy = new Proxy(user, handler);

// if you try to set age to bool, you will get error
userProxy.age = true;
// Error: Age must be a number.

userProxy.age = '16';
// The user must be 18 or older.

userProxy.age = '20'
// no errors would be found

3️⃣ 신청

handler.apply()  메서드는 함수 호출에 대한 트랩입니다. 구문은 다음과 같습니다.

let proxy = new Proxy(target, {
    apply: function(target, thisArg, args) {
        //...
    }
});

이제 이름과 성을 대문자로 표시하여 위의 예를 따르겠습니다.

const user = {
    firstName: 'suprabha',
    lastName: 'supi'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}

const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user)); // SUPRABHA SUPI

참고 🧐

Proxy MDN

🌟


📚 Ebooks


🌟