JavaScript Academy · Урок

Создание Proxy

Оборачивайте объекты для перехвата операций.

«Создание Proxy» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое прокси

Прокси оборачивает объект и позволяет перехватывать базовые операции, такие как чтение, запись и удаление свойств.

Прокси создаётся с помощью new Proxy(target, handler), где обработчик определяет перехватчики, изменяющие поведение.

Пустой обработчик

С пустым обработчиком прокси ведёт себя точно так же, как target. Каждая операция передаётся напрямую.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

target и прокси используют общее состояние

Прокси не копирует target. Они ссылаются на один и тот же исходный объект, поэтому изменение через любой из них видно в обоих.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

Добавление перехватчика get

Перехватчик get перехватывает чтение свойств. Здесь каждое чтение сначала записывается в журнал, а затем возвращается значение.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Параметры перехватчика

Перехватчик get получает target, имя свойства и получатель (прокси). Вы сами решаете, что вернуть.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

Вычисляемые свойства при чтении

Перехватчик get может возвращать значения, которые target на самом деле не хранит, вычисляя их непосредственно в момент обращения.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

Добавление перехватчика set

Перехватчик set перехватывает записи. Вы должны вернуть true, чтобы сообщить об успехе, иначе присваивание считается неудачным.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

Перехватчик has

Перехватчик has перехватывает оператор in, позволяя настроить проверку принадлежности.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

Перехватчик deleteProperty

Перехватчик deleteProperty перехватывает операцию delete. Для успешного выполнения верните true.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Доступно много перехватчиков

Помимо get и set, прокси поддерживают перехватчики для has, deleteProperty, ownKeys, apply (для функций), construct и других операций. Реализуйте только нужные вам перехватчики.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Почему прокси важны

Прокси позволяют добавить проверку, журналирование, значения по умолчанию и реактивность, не изменяя target. Они лежат в основе таких фреймворков, как система реактивности Vue. Далее вы подробнее рассмотрите перехватчики get и set.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Быстрая проверка

Что создаёт выражение new Proxy(target, handler)?

Итоги: создание прокси

Вы научились перехватывать операции над объектами:

new Proxy(target, handler) оборачивает объект с помощью перехватчиков.
Пустой обработчик пропускает все операции, а прокси и target используют общее состояние.
Распространённые перехватчики: get, set, has, deleteProperty, ownKeys.
Перехватчики set и delete должны возвращать true при успешном выполнении.

Часто задаваемые вопросы

Урок «Создание Proxy» бесплатный?

Да — полный текст урока «Создание Proxy» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Создание Proxy»?

Оборачивайте объекты для перехвата операций. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Создание Proxy»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy