Объекты — это фундаментальная структура данных в JavaScript, которая используется для хранения данных и управления ими. По умолчанию объекты изменяемы. Это означает, что их свойства можно добавлять, удалять или изменять в любое время.
Однако бывают ситуации, когда вы хотите ограничить возможность изменения объекта или вообще запретить дальнейшие изменения. Здесь пригодятся методы Object.freeze, Object.seal и Object.preventExtensions.
В этом блоге мы рассмотрим эти методы, попытаемся понять их различия и предоставим примеры кода, показывающие, как они используются.
Object.freeze()
Метод Object.freeze()
используется для того, чтобы сделать объект полностью неизменяемым. Это означает, что к объекту нельзя добавлять новые свойства, удалять существующие свойства и изменять значения существующих свойств.
Object.freeze()
работает только на первом уровне ключей объекта, а вложенные объекты или массивы не подвергаются глубокой заморозке.
Вот как вы можете использовать Object.freeze()
:
const playlist = { name: 'Chill Vibes', creator: 'Naina', songs: [ { title: 'Smooth Jazz Groove', artist: 'Saxophone Sam', duration: '4:32', }, ], }; Object.freeze(playlist); playlist.name = 'Relaxation Mix'; // This won't change the 'name' property playlist.songs.push({ // This will add a new song title: 'Tranquil Rain', artist: 'Nature Sounds', duration: '9:45', }); playlist.year = "2023" // This won't add a 'year' property console.log(playlist);
В приведенном выше примере объект playlist
замораживается с помощью Object.freeze()
. Хотя попытка изменить свойство name
для добавления свойства year
предотвращена, массив songs
все равно можно изменить, поскольку он является вложенным объектом в списке воспроизведения.
Выход:
{ name: 'Chill Vibes', creator: 'Naina', songs: [ { title: 'Smooth Jazz Groove', artist: 'Saxophone Sam', duration: '4:32', }, { title: 'Tranquil Rain', artist: 'Nature Sounds', duration: '9:45', }, ], };
Объект.печать()
Метод Object.seal()
является менее строгой альтернативой Object.freeze()
. Это делает объект нерасширяемым. Это означает, что вы можете предотвратить добавление или удаление свойств объекта, но при этом позволяет обновлять значения существующих свойств.
Вот как вы можете использовать Object.seal()
:
const personalInfo = Object.seal({ firstName: 'Marks', lastName: 'Roy', age: 30, address: { street: '123 Main St', city: 'New York', zip: '10001', }, }); // Attempt to modify the sealed object personalInfo.middleName = 'Edward'; // This won't add a new property personalInfo.address.country = 'USA'; // This will change a nested property delete personalInfo.age; // This won't delete an existing property console.log(personalInfo);
В этом примере объект personalInfo
представляет информацию о человеке. Он имеет такие свойства, как вложенный объект address
, firstName
, lastName
, age
. Мы запечатываем объект с помощью Object.seal(), чтобы предотвратить добавление или удаление свойств.
Несмотря на попытки добавить свойство middleName
(не работает), обновить свойство address.country
(работает) или удалить свойство age
(не работает), объект остается запечатанным. Это указывает на то, что, хотя существующие свойства объекта все еще могут быть обновлены, структура объекта фиксирована.
Выход:
{ firstName: 'Marks', lastName: 'Roy', age: 30, address: { street: '123 Main St', city: 'New York', zip: '10001', country: 'USA' } }
Object.preventExtensions()
Object.preventExtensions()
— это метод JavaScript, который позволяет предотвратить добавление новых свойств к объекту, в то же время позволяя обновлять существующие свойства и удалять существующие свойства. Когда объекту «запрещено расширение, ' он становится фиксированной структурой, и вы не можете добавлять к нему новые свойства.
const smartHomeDevice = { deviceName: 'Smart Thermostat', temperature: 72, mode: 'Cool', price: 1000, }; // Prevent any further extensions to the smartHomeDevice object Object.preventExtensions(smartHomeDevice); // Attempt to update existing settings and add a new one smartHomeDevice.temperature = 68; // Update the temperature smartHomeDevice.mode = 'Heat'; // Change the mode delete smartHomeDevice.price; // This will delete the 'price' property. smartHomeDevice.displayColor = 'Blue'; // This won't add a new 'displayColor' setting console.log(smartHomeDevice);
- В этом примере мы начинаем с объекта
smartHomeDevice
, содержащего такие свойства, какdeviceName
,temperature
,price
иmode
. - Мы используем
Object.preventExtensions(smartHomeDevice)
, чтобы предотвратить добавление новых настроек в объект устройства. - Затем мы пытаемся изменить значение существующих настроек, например обновить
temperature
и изменитьmode
. Кроме того, удаление свойстваprice
также работает. - Наконец, мы пытаемся добавить новый параметр
displayColor
, но он не будет добавлен, поскольку для объекта запрещено расширение.
Выход:
{ deviceName: 'Smart Thermostat', temperature: 68, mode: 'Heat' }
В следующей таблице приведены основные различия между
Object.freeze()
,Object.seal()
иObject.preventExtensions()
:
Примеры использования:
- Используйте
Object.freeze()
, если хотите создать полностью неизменяемый объект, гарантируя, что никакие изменения невозможны. - Используйте
Object.seal()
, если вы хотите разрешить изменение существующих свойств, но запретить добавление или удаление свойств. - Используйте
Object.preventExtensions()
, если хотите разрешить изменение существующих свойств и запретить добавление новых свойств.
Наконец, в JavaScript Object.freeze()
, Object.seal()
и Object.preventExtensions()
— это методы, обеспечивающие различные уровни контроля над изменчивостью объекта. Вы можете создавать более надежные и безопасные приложения JavaScript, зная об этих методах и о том, когда их использовать. Вы можете выбрать подход, который лучше всего соответствует вашим потребностям, исходя из вашего конкретного варианта использования, независимо от того, нужна ли вам полная неизменяемость, ограниченный контроль или просто предотвращение добавления свойств.
На простом английском языке
Спасибо, что вы являетесь частью нашего сообщества! Прежде чем уйти:
- Обязательно аплодируйте и следуйте за автором! 👏
- Еще больше контента вы можете найти на PlainEnglish.io 🚀
- Подпишитесь на нашу бесплатную еженедельную рассылку. 🗞️
- Следуйте за нами в Twitter(X), LinkedIn, YouTube и Discord.