JS Proxy get, set, has: проксируем объект

Proxy — объект прокси позволяет нам перехватывать основные операции для другого объекта. Такие как get, set, has и т.д

Не будем останавливать наше внимание на всех возможных обработчиках, рассмотрим только 3 из них. Так сказать основные.

Для примера будем использовать простой объект с одним числовым свойством count:

const jsproxy = {
    count: 7
}

Js Proxy Get

Создаем константу tar в которой проксируем нашу цель объект jsproxy. И устанавливаем перехватчик get. В этом месте мы будем выполнять кастомный код, каждый раз когда кто-то будет обращаться к свойству нашего объекта. Но обратите внимание, что обращаться мы будет к новому объекту tar, но не к jsproxy.

const tar = new Proxy( jsproxy, {
    get( target, prop ) {
        console.log('Our property here ' + target[prop] );
        return target[prop]
    }
})

Теперь обратимся к свойству:

tar.count
// Результат
// Our property here 7
// 7

В результате отработает свойство и наш console.log

По сути, мы можем делать что угодно. Изменять возвращенное значение свойства, логировать обращение и т.д

Js Proxy set

Со свойством set работает та же логика, мы просто навешиваем перехватчик и выполняем, произвольный код. К примеру, давайте разрешим изменять свойство count только на цифру 5. На все остальное отдавать ошибку.

const tar = new Proxy( jsproxy, {
    set( target, prop, value ) {
        if ( value === 5 ) {
            target[prop] = value
        } else {
            throw new Error('Error')
        }
    }
})

Js Proxy Has

Теперь, к примеру в перехватчике has мы будем возвращать false если кто-то попытается проверить существует ли свойство count. А во всех остальных случаях true. Как будто у нас есть любые свойства в объекте кроме свойства count.

const tar = new Proxy( jsproxy, {
    has( target, prop ) {
        if ( prop ==='count' ) {
            return false;
        }
            
        return true;
    }
})

Заметьте, что это сработает для проверки через in. Но не через hasOwnProperty.

'count' in tar

Заключение

Объект Proxy очень гибкий и полезный инструмент для разработчика, который позволяет создавать весьма интересный функционал. На практике чаще всего используются методы js proxy get и js proxy set