← Назад ко всем вопросам

Как сделать объект неизменяемым

1️⃣ Как кратко ответить

Для создания неизменяемого объекта в JavaScript используйте Object.freeze(). Это метод предотвращает добавление, удаление и изменение свойств объекта. Однако, он работает только на верхнем уровне, поэтому вложенные объекты останутся изменяемыми.

2️⃣ Подробное объяснение темы

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

В JavaScript для создания неизменяемого объекта используется метод Object.freeze(). Этот метод "замораживает" объект, предотвращая добавление, удаление и изменение его свойств. Однако, важно помнить, что Object.freeze() работает только на верхнем уровне объекта. Если объект содержит вложенные объекты, они останутся изменяемыми.

Пример использования Object.freeze():

const person = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'Wonderland',
    zip: '12345'
  }
};
​
// Замораживаем объект person
Object.freeze(person);
​
// Попытка изменить свойство name
person.name = 'Bob'; // Изменение не произойдет
​
// Попытка добавить новое свойство
person.gender = 'female'; // Добавление не произойдет
​
// Попытка удалить свойство
delete person.age; // Удаление не произойдет
​
// Вложенные объекты остаются изменяемыми
person.address.city = 'New Wonderland'; // Изменение произойдет
​
console.log(person);
  • const person = {...}: Создаем объект person с несколькими свойствами, включая вложенный объект address.
  • Object.freeze(person): Замораживаем объект person, предотвращая изменения на верхнем уровне.
  • person.name = 'Bob': Попытка изменить свойство name не будет успешной, так как объект заморожен.
  • person.gender = 'female': Попытка добавить новое свойство gender не будет успешной.
  • delete person.age: Попытка удалить свойство age не будет успешной.
  • person.address.city = 'New Wonderland': Вложенный объект address остается изменяемым, поэтому изменение свойства city будет успешным.

Для полной неизменяемости, включая вложенные объекты, необходимо рекурсивно замораживать каждый вложенный объект. Это можно сделать с помощью пользовательской функции:

function deepFreeze(obj) {
  // Получаем имена всех свойств объекта
  const propNames = Object.getOwnPropertyNames(obj);
​
  // Замораживаем свойства для заморозки вложенных объектов
  for (const name of propNames) {
    const value = obj[name];
​
    // Замораживаем свойство, если оно является объектом
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  }
​
  // Замораживаем сам объект
  return Object.freeze(obj);
}
​
const fullyFrozenPerson = deepFreeze(person);
​
// Теперь все уровни объекта неизменяемы
fullyFrozenPerson.address.city = 'Old Wonderland'; // Изменение не произойдет
​
console.log(fullyFrozenPerson);
  • function deepFreeze(obj) {...}: Определяем функцию deepFreeze, которая рекурсивно замораживает объект и все его вложенные объекты.
  • const propNames = Object.getOwnPropertyNames(obj): Получаем массив имен всех свойств объекта.
  • for (const name of propNames) {...}: Итерируемся по всем свойствам объекта.
  • if (value && typeof value === 'object') {...}: Проверяем, является ли свойство объектом, и если да, рекурсивно замораживаем его.
  • return Object.freeze(obj): Замораживаем сам объект.

Использование deepFreeze гарантирует, что объект и все его вложенные объекты станут неизменяемыми, что может быть полезно для обеспечения целостности данных в сложных приложениях.

Тема: JavaScript
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки