Що таке патерн Proxy?

JavaScript нативний Proxy

javascript

const user = {
  name: 'Іван',
  age: 30
};

const handler = {
  get(target, prop) {
    console.log(`Читання ${prop}`);
    return target[prop];
  },
  
  set(target, prop, value) {
    console.log(`Встановлення ${prop} на ${value}`);
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Вік має бути числом');
    }
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(user, handler);

console.log(proxy.name);  // Читання name → Іван
proxy.age = 31;           // Встановлення age на 31 ✅
proxy.age = 'тридцять';   // TypeError! ❌

Caching Proxy

javascript

class ImageProxy {
  constructor(image) {
    this.image = image;
    this.cache = null;
  }
  
  display() {
    if (!this.cache) {
      console.log('Завантаження зображення...');
      this.cache = this.image.load();
    }
    return this.cache;  // З кешу
  }
}

// Використання
const image = new RealImage('photo.jpg');
const proxy = new ImageProxy(image);
proxy.display();  // Завантажує
proxy.display();  // З кешу!

Випадки використання

✅ Lazy loading ✅ Кешування ✅ Валідація ✅ Контроль доступу ✅ Логування ✅ Vue/Mobx реактивність

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке патерн Proxy?

#JavaScript нативний Proxy

#Caching Proxy

#Випадки використання

Коротка відповідь

JavaScript нативний Proxy

Caching Proxy

Випадки використання