JavaScript Academy · Урок

Object.freeze и seal

Предотвращайте изменения объектов.

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

Зачем замораживать объекты?

Неизменяемость означает, что данные нельзя изменить после создания. Она предотвращает случайные изменения, упрощает понимание кода и помогает избежать целых классов ошибок.

JavaScript предоставляет Object.freeze и Object.seal, чтобы заблокировать объекты.

Основы Object.freeze

Object.freeze делает объект полностью доступным только для чтения: нельзя добавлять, удалять или изменять свойства. Метод возвращает тот же объект, теперь замороженный.

const user = Object.freeze({ name: 'Ada', age: 36 });
user.age = 99;
console.log(user.age);

Проверка с помощью isFrozen

Object.isFrozen сообщает, заморожен ли объект. Это полезно перед попыткой обновления.

const config = Object.freeze({ debug: false });
const settings = { theme: 'dark' };

console.log(Object.isFrozen(config));
console.log(Object.isFrozen(settings));

Тихий и строгий сбой

В нестрогом коде запись в замороженный объект завершается без сообщения об ошибке. В строгом режиме она вызывает TypeError. В обоих случаях значение не изменяется.

'use strict';
const frozen = Object.freeze({ x: 1 });
try {
  frozen.x = 2;
} catch (e) {
  console.log(e.name);
}
console.log(frozen.x);

Заморозка блокирует новые свойства

Заморозка также предотвращает добавление свойств. Новый ключ просто не появляется.

const point = Object.freeze({ x: 0 });
point.y = 5;
console.log(point.y);
console.log(Object.keys(point));

Заморозка блокирует удаление

Из замороженного объекта также нельзя удалять свойства. Свойство остаётся на месте.

const obj = Object.freeze({ keep: 'me' });
delete obj.keep;
console.log(obj.keep);

Object.seal работает иначе

Object.seal менее строг, чем freeze. Вы не можете добавлять или удалять свойства, но по-прежнему можете изменять существующие значения.

const sealed = Object.seal({ count: 1 });
sealed.count = 2;
sealed.extra = 3;

console.log(sealed.count);
console.log(sealed.extra);

Проверка с помощью isSealed

Object.isSealed сообщает, запечатан ли объект. Обратите внимание: каждый замороженный объект также запечатан, но обратное неверно.

const sealed = Object.seal({ a: 1 });
const frozen = Object.freeze({ b: 2 });

console.log(Object.isSealed(sealed));
console.log(Object.isSealed(frozen));
console.log(Object.isFrozen(sealed));

Итоги сравнения freeze и seal

freeze: нельзя добавлять, удалять или изменять. seal: нельзя добавлять или удалять, но изменение разрешено. Выбирайте seal, когда структура объекта фиксирована, но значения меняются.

const f = Object.freeze({ v: 1 });
const s = Object.seal({ v: 1 });

f.v = 100;
s.v = 100;

console.log('frozen v:', f.v);
console.log('sealed v:', s.v);

preventExtensions

Самая мягкая блокировка — Object.preventExtensions: нельзя добавлять свойства, но можно изменять и удалять существующие. Это самый слабый из трёх вариантов.

const obj = Object.preventExtensions({ a: 1 });
obj.a = 2;
obj.b = 3;

console.log(obj.a);
console.log(obj.b);
console.log(Object.isExtensible(obj));

Почему это важно

Заморозка конфигурации и констант предотвращает случайные изменения в разных частях кодовой базы. Но помните: Object.freeze действует поверхностно, поэтому вложенные объекты остаются изменяемыми. Далее Вы это исправите.

const SETTINGS = Object.freeze({ maxRetries: 3 });
function tryUpdate() {
  SETTINGS.maxRetries = 10;
}
tryUpdate();
console.log(SETTINGS.maxRetries);

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

В чём разница между Object.freeze и Object.seal?

Итоги: freeze и seal

Вы научились блокировать объекты:

Object.freeze: запрещает добавление, удаление и изменение. Проверяйте с помощью isFrozen.
Object.seal: запрещает добавление и удаление, но разрешает изменение.
preventExtensions: запрещает только добавление.
Все три способа действуют поверхностно, поэтому далее мы перейдём к глубокой заморозке.

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

Урок «Object.freeze и seal» бесплатный?

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

Чему я научусь в уроке «Object.freeze и seal»?

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

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

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

Сколько времени занимает урок «Object.freeze и seal»?

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

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

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

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

← Назад к JavaScript Academy