JavaScript Academy · Урок

Ловушки get и set

Настраивайте чтение и запись свойств.

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

Перехватчики get и set

Перехватчики get и set — наиболее часто используемые точки перехвата прокси. Они перехватывают чтение и запись свойств, позволяя преобразовывать значения, проверять входные данные или регистрировать обращения.

Сигнатура перехватчика get

get(target, property, receiver) выполняется при каждом чтении свойства. Верните любое значение, которое должен увидеть вызывающий код.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

Значения по умолчанию через get

Перехватчик get может предоставить fallback для отсутствующих свойств вместо возврата undefined.

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

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

Преобразование значений при чтении

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

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

Сигнатура перехватчика set

set(target, property, value, receiver) выполняется при каждой записи. Для успешного выполнения он должен вернуть true, иначе строгий режим выдаст ошибку.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

Проверка в set

Классическое применение перехватчика set — проверка: отклонить недопустимые значения до того, как они попадут в target.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

Приведение значений в set

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

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

Журналирование обеих операций

Объедините get и set, чтобы отслеживать каждое обращение. Это незаменимо при отладке использования объекта.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

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

Обеспечение режима только для чтения

Перехватчик set, который всегда отклоняет записи, превращает прокси в представление target только для чтения.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Ключи-символы и внутренние операции

Перехватчики срабатывают и для ключей-символов. Будьте осторожны: журналирование каждого свойства, включая внутренние символы, может создавать много лишних записей, поэтому при необходимости применяйте фильтрацию.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

Почему get и set важны

Вместе эти перехватчики обеспечивают проверку, вычисляемые свойства, значения по умолчанию, журналирование и реактивность — и всё это без изменения target. Однако ручная запись target[prop] = value внутри перехватчиков связана с особыми случаями. Программный интерфейс Reflect, который рассматривается далее, правильно обрабатывает их.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

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

Что должен вернуть перехватчик set, чтобы сообщить об успешном присваивании?

Итоги: перехватчики get и set

Вы изучили основные перехватчики прокси:

get(target, prop, receiver) перехватывает чтение и может вернуть любое значение.
set(target, prop, value, receiver) перехватывает запись и возвращает true при успехе.
Используйте их для значений по умолчанию, преобразований, проверки и журналирования.
Для правильной внутренней обработки в перехватчиках используйте Reflect, который рассматривается далее.

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

Урок «Ловушки get и set» бесплатный?

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

Чему я научусь в уроке «Ловушки get и set»?

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

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

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

Сколько времени занимает урок «Ловушки get и set»?

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

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

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

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

← Назад к JavaScript Academy