JavaScript - Методы объектов ES5

Привет, будущие маги JavaScript! Сегодня мы окунемся в魔法льный мир методов объектов ES5. Не волнуйтесь, если вы новички в программировании - я буду вашим дружественным проводником в этом приключении, и мы будем двигаться шаг за шагом. К концу этого руководства вы будете manipulate объекты как профессионал!

JavaScript - ES5 Object Methods

Методы объектов JavaScript ES5

Прежде чем начать, давайте быстро освежим в памяти, что такое объекты в JavaScript. Представьте объект как контейнер, который хранит связанную информацию. Например, объект "car" может содержать свойства, такие как цвет, марка и год.

let car = {
color: "red",
brand: "Toyota",
year: 2020
};

Теперь ES5引入ило несколько мощных методов для работы с этими объектами. Давайте рассмотрим их один за одним!

Метод JavaScript Object.create()

Метод Object.create() позволяет нам создать новый объект, используя существующий объект в качестве прототипа. Это как сказать: "Эй, JavaScript, создай для меня новый объект, который наследуется от этого другого объекта!"

let animal = {
makeSound: function() {
console.log("Some generic animal sound");
}
};

let dog = Object.create(animal);
dog.makeSound(); // Вывод: Some generic animal sound

dog.bark = function() {
console.log("Woof woof!");
};

dog.bark(); // Вывод: Woof woof!

В этом примере мы создали объект dog, который наследуется от объекта animal. dog может использовать метод makeSound из animal, но у него также есть свой метод bark.

Метод JavaScript Object.defineProperty()

Object.defineProperty() позволяет нам добавить или изменить Свойство объекта. Это как добавить новую функцию к вашему автомобилю после его покупки!

let person = {};

Object.defineProperty(person, "name", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});

console.log(person.name); // Вывод: John
person.name = "Jane"; // Это не изменит имя
console.log(person.name); // Вывод: John

Здесь мы добавили Свойство name к объекту person. Мы установили его как неудаляемое, что означает, что мы не можем изменить его значение после его установки.

Метод JavaScript Object.defineProperties()

Object.defineProperties() как defineProperty(), но на стероидах! Он позволяет нам определять несколько свойств сразу.

let book = {};

Object.defineProperties(book, {
title: {
value: "The Great Gatsby",
writable: true
},
author: {
value: "F. Scott Fitzgerald",
writable: false
}
});

console.log(book.title); // Вывод: The Great Gatsby
console.log(book.author); // Вывод: F. Scott Fitzgerald

book.title = "Gatsby"; // Это работает
book.author = "Scott"; // Это не работает

console.log(book.title); // Вывод: Gatsby
console.log(book.author); // Вывод: F. Scott Fitzgerald

В этом примере мы определили два свойства для нашего объекта book одним махом. title قابل для записи, но author нет.

Метод JavaScript Object.getOwnPropertyDescriptor()

Этот метод позволяет нам получить описание свойства. Это как спросить о спецификациях определенной функции вашего автомобиля.

let car = {
brand: "Toyota"
};

let descriptor = Object.getOwnPropertyDescriptor(car, "brand");

console.log(descriptor);
// Вывод:
// {
//   value: "Toyota",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Здесь мы получаем�述атель свойства brand нашего объекта car. Он tells нам значение и то, является ли Свойство writable, enumerable и configurable.

Метод JavaScript Object.getOwnPropertyNames()

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

let person = {
name: "John",
age: 30
};

Object.defineProperty(person, "ssn", {
value: "123-45-6789",
enumerable: false
});

console.log(Object.getOwnPropertyNames(person));
// Вывод: ["name", "age", "ssn"]

Даже несмотря на то, что мы сделали ssn неудаляемым, getOwnPropertyNames() все равно включает его в список.

Метод JavaScript Object.getPrototypeOf()

Этот метод возвращает прототип указанного объекта. Это как спросить: "Кто твой родитель?"

let animal = {
eats: true
};

let rabbit = Object.create(animal);

console.log(Object.getPrototypeOf(rabbit) === animal); // Вывод: true

Здесь мы confirm, что прототип rabbit действительно объект animal.

Метод JavaScript Object.keys()

Object.keys() возвращает массив собственных перечислимых свойств объекта. Это как получить список всех видимых функций вашего автомобиля.

let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};

console.log(Object.keys(car));
// Вывод: ["brand", "model", "year"]

Этот метод возвращает только перечислимые свойства, в отличие от getOwnPropertyNames(), который возвращает все свойства.

Метод JavaScript Object.freeze()

Object.freeze() замораживает объект. Замороженный объект больше нельзя изменить. Это как положить ваш автомобиль в блок льда - вы не можете добавить, удалить или изменить его свойства!

let car = {
brand: "Toyota",
model: "Corolla"
};

Object.freeze(car);

car.year = 2020; // Это не работает
car.brand = "Honda"; // Это не работает tampoco

console.log(car); // Вывод: { brand: "Toyota", model: "Corolla" }

После замораживания объекта car, мы не можем добавить Свойство year или изменить brand.

Метод JavaScript Object.seal()

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

let person = {
name: "John",
age: 30
};

Object.seal(person);

person.gender = "Male"; // Это не работает
person.age = 31; // Это работает

delete person.name; // Это не работает

console.log(person); // Вывод: { name: "John", age: 31 }

Мы можем изменить age, но не можем добавить gender или удалить name.

Метод JavaScript Object.isFrozen()

Этот метод определяет, заморожен ли объект. Это как проверить, действительно ли ваш автомобиль застрял в том блоке льда!

let car = {
brand: "Toyota"
};

console.log(Object.isFrozen(car)); // Вывод: false

Object.freeze(car);

console.log(Object.isFrozen(car)); // Вывод: true

Метод JavaScript Object.isSealed()

Аналогично isFrozen(), этот метод проверяет, запечатан ли объект.

let person = {
name: "John"
};

console.log(Object.isSealed(person)); // Вывод: false

Object.seal(person);

console.log(Object.isSealed(person)); // Вывод: true

Метод JavaScript Object.preventExtensions()

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

let car = {
brand: "Toyota"
};

Object.preventExtensions(car);

car.model = "Corolla"; // Это не работает

console.log(car); // Вывод: { brand: "Toyota" }

После предотвращения расширений мы не можем добавить Свойство model.

Метод JavaScript Object.isExtensible()

Этот метод определяет, расширяем ли объект (Whether it can have new properties added to it).

let car = {
brand: "Toyota"
};

console.log(Object.isExtensible(car)); // Вывод: true

Object.preventExtensions(car);

console.log(Object.isExtensible(car)); // Вывод: false

Вот краткое резюме всех методов, которые мы рассмотрели:

Метод	Описание
Object.create()	Создает новый объект с указанным прототипом и свойствами
Object.defineProperty()	Добавляет или изменяет Свойство объекта, описываемое заданным дескриптором
Object.defineProperties()	Определяет новые или изменяет существующие свойства непосредственно в объекте, возвращая объект
Object.getOwnPropertyDescriptor()	Возвращает дескриптор свойства для собственного свойства объекта
Object.getOwnPropertyNames()	Возвращает массив всех свойств, найденных непосредственно в данном объекте
Object.getPrototypeOf()	Возвращает прототип указанного объекта
Object.keys()	Возвращает массив собственных перечислимых свойств объекта
Object.freeze()	Замораживает объект: другая программа не может удалить или изменить его свойства
Object.seal()	Запечатывает объект, предотвращая добавление новых свойств и помечая все существующие свойства как неудаляемые
Object.isFrozen()	Определяет, заморожен ли объект
Object.isSealed()	Определяет, запечатан ли объект
Object.preventExtensions()	Prevents new properties from ever being added to an object
Object.isExtensible()	Determines if an object is extensible

И вот и все! Вы только что совершили грандиозное путешествие по методам объектов ES5. Помните, что практика делает perfect, так что не стесняйтесь экспериментировать с этими методами в вашем собственном коде. Счастливого кодирования, будущие мастера JavaScript!

Credits: Image by storyset

Предыдущий учебник:

JavaScript - Нативные прототипы

Следующий учебник:

JavaScript - Инкапсуляция