JS об'єкт Object

Вступ до об'єкта Object в JavaScript

Об'єкт у JavaScript – це центральна структура даних мови, яка дозволяє зберігати дані в парах ключ/значення. Об'єкти можуть містити не тільки прості дані (такі як рядки, числа та булеві значення), але й функції, які можуть бути викликаними методами об'єкта. Майже усі об'єкти в JavaScript є екземплярами Object і успадковують властивості (включаючи методи) від Object.prototype. Проте, користувач може створити об'єкти з визначеними властивостями і методами, замість стандартних.

let person = {
    name: "Anna",
    age: 28,
    greet: function() {
        return "Привіт! Мене звати " + this.name;
    }
};

console.log(person.name); // Виведе: Anna
console.log(person.greet()); // Виведе: Привіт! Мене звати Anna

В цьому прикладі ми створили об'єкт person з трьома властивостями: ім'ям, віком та методом greet. Метод greet дозволяє об'єкту "салютувати". Слово this в методі вказує на поточний об'єкт, тому this.name повертає ім'я особи.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.describe = function() {
    return `${this.name}, ${this.age} років`;
};

let anna = new Person("Anna", 28);
console.log(anna.describe()); // Виведе: Anna, 28 років

У цьому прикладі ми використовуємо конструктор Person для створення нового екземпляра об'єкта. Метод describe додається до прототипу, що означає, що всі об'єкти, створені за допомогою конструктора Person, будуть мати доступ до цього методу.

Способи створення об'єктів в JavaScript

JavaScript пропонує різні способи створення об'єктів. Вибір підходу залежить від конкретних завдань і потреб розробника. Ось найпоширеніші способи створення об'єктів:

Літерал об'єкта:

Це найпростіший спосіб створити об'єкт.

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

Використовуйте літерал об'єкта, коли вам потрібно швидко створити одноразовий об'єкт без додаткових методів і прототипів.

Конструктор Object:

Це більш універсальний спосіб створення об'єктів.

let person = new Object();
person.name = "John";
person.age = 30;

Цей підхід рідко використовується у сучасних додатках, але варто знати про його існування.

Конструктори користувача:

Дозволяє створити багато об'єктів з певними властивостями і методами.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

let person1 = new Person("John", 30);
let person2 = new Person("Anna", 25);

Використовуйте конструктори користувача, коли плануєте створювати багато об'єктів зі схожим набором властивостей та методів.

Функція Object.create():

Цей метод дозволяє створювати об'єкти з конкретним прототипом.

let personPrototype = {
    greet: function() {
        return `Привіт! Мене звати ${this.name}`;
    }
};

let person = Object.create(personPrototype);
person.name = "John";

console.log(person.greet()); // Виведе: "Привіт! Мене звати John"

Використовуйте Object.create(), коли хочете створити об'єкт з конкретним прототипом. Це може бути корисно для реалізації спадкування.

Рекомендації та відмінності:

Літерал об'єкта – це найбільш простий і читабельний спосіб для створення об'єктів з фіксованою структурою.
Конструктори (як вбудовані, так і користувача) найкраще підходять для створення об'єктів, які поділяють певні методи або поведінку.
Object.create() використовується рідше, але це потужний інструмент для створення об'єктів з конкретним прототипом, особливо коли йде мова про спадкування між об'єктами.

При виборі методу створення об'єкта завжди звертайте увагу на ваші потреби та контекст завдання.

Прототипний ланцюг в JavaScript

Об'єктна модель JavaScript базується на понятті "прототипу". Кожен об'єкт може мати інший об'єкт, який служить йому прототипом. Цей прототип може мати свій власний прототип, і так далі, створюючи таким чином "ланцюг прототипів". Ця модель принесла JavaScript особливості наслідування.

Як це працює?

Коли ви намагаєтеся отримати доступ до властивості або методу об'єкта, інтерпретатор спочатку шукає їх безпосередньо в самому об'єкті. Якщо вони не знайдені, пошук переходить до прототипу цього об'єкта, потім до прототипу прототипу і так далі, аж до кінця ланцюга прототипів.

Давайте розглянемо наступний приклад:

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    return `Привіт, мене звати ${this.name}!`;
}

let john = new Person("John");
console.log(john.sayHello()); // Виведе: "Привіт, мене звати John!"

У цьому прикладі, метод sayHello не знаходиться безпосередньо в об'єкті john, але доступний завдяки прототипному ланцюгу через Person.prototype.

Як змінювати прототип об'єкта?

Можна змінити прототип об'єкта за допомогою методу Object.setPrototypeOf() або за допомогою спеціальної властивості __proto__. Однак не рекомендується часто використовувати ці методи, так як це може погіршити продуктивність.

let animal = {
    makesSound: function() {
        return "Деякий звук";
    }
};

let dog = Object.create(animal);
dog.makesSound = function() {
    return "Гав-гав";
};

console.log(dog.makesSound()); // Виведе: "Гав-гав"

У цьому прикладі dog є нащадком animal і перезаписує метод makesSound.

Важливі застереження:

Пам'ятайте про можливість "затінення" властивостей: якщо у потомка і його прототипу є властивості з однаковими іменами, доступ буде до властивості потомка, а не прототипа.
Використання прототипів може ускладнити відлагодження, оскільки ви можете не відразу зрозуміти, звідки прийшла певна властивість або метод.
Із зміною прототипів слід поводитися обережно, щоб не порушити очікувану логіку роботи програми.

Працюючи з прототипами, завжди слід усвідомлювати структуру ланцюга і пам'ятати про можливі пастки. Тим не менше, вірно використовувані прототипи – це потужний інструмент для організації коду і створення гнучких структур даних.

Безпека та робота з Object.prototype в JavaScript

Object.prototype є основою всіх об'єктів у JavaScript. Воно є основним прототипом, від якого успадковуються інші об'єкти. Зміни, внесені до Object.prototype, відображаються на всіх об'єктах через прототипне наслідування, що робить його потужним, але одночасно потенційно небезпечним інструментом.

Розширення Object.prototype

Додавання властивостей або методів до Object.prototype може здаватися корисним, але це може призвести до непередбачуваних проблем:

Object.prototype.showType = function() {
    return typeof this;
};

const myNumber = 5;
console.log(myNumber.showType()); // Виведе: "object"

У прикладі вище, ми додали метод showType до Object.prototype. Це означає, що всі об'єкти в JavaScript будуть мати доступ до цього методу. Однак результат може бути не таким очевидним, як ми очікували, і може призвести до плутанини.

Потенційні проблеми

Конфлікти імен: Якщо ви або інша бібліотека, яку ви використовуєте, додасте властивість з таким же ім'ям, що вже існує, можуть виникнути конфлікти.
Проблеми із перебором: Додавання нових методів або властивостей може зламати цикли for...in, якщо не використовується метод hasOwnProperty.

for (const key in myNumber) {
    if (myNumber.hasOwnProperty(key)) {
        console.log(key);
    }
}

Вище ми використовуємо метод hasOwnProperty для перевірки, чи є властивість безпосередньо в об'єкті, щоб уникнути роботи з властивостями, успадкованими від Object.prototype.

Рекомендації

Уникайте змін Object.prototype: Замість цього створюйте нові об'єкти або використовуйте класи для наслідування.
Використовуйте Object.create(null) для створення об'єктів без прототипів: Це корисно, коли ви хочете мати "чистий" об'єкт без додаткових властивостей з Object.prototype.
Будьте уважні з бібліотеками: Якщо ви використовуєте сторонні бібліотеки, переконайтеся, що вони не змінюють Object.prototype, щоб уникнути непередбачуваних наслідків.

В роботі з Object.prototype завжди слід бути обережним та розуміти можливі наслідки внесених змін.

Порада:	Хоча можливо додавати нові властивості чи методи до `Object.prototype`, це може призвести до непередбачуваних проблем у вашому коді або конфліктів із іншими бібліотеками. Замість цього розглядайте можливість створення нових об'єктів або використання класів.
Порада:	Використовуйте деструктивне присвоєння. Ця особливість ES6 дозволяє вам легко видобути значення властивостей з об'єктів. `const person = { firstName: "Олександр", lastName: "Іванов" }; const { firstName, lastName } = person; console.log(firstName); // Виведе "Олександр"`
Нотатка:	Коли ви присвоюєте один об'єкт іншому, ви насправді передаєте посилання на цей об'єкт, а не копіюєте його. Це може призвести до неочікуваних результатів, якщо ви змінюєте один об'єкт, очікуючи, що інший залишиться незміненим. `const obj1 = { key: "value" }; const obj2 = obj1; obj2.key = "newValue"; console.log(obj1.key); // Виведе "newValue", а не "value"`
Нотатка:	Якщо вам потрібно створити повну копію об'єкта (не посилання), враховуючи вкладені об'єкти, розгляньте використання таких методів, як рекурсивна функція або `JSON.parse()` разом із `JSON.stringify()`. `const deepCopy = JSON.parse(JSON.stringify(originalObject));`
Нотатка:	Якщо ви хочете, щоб ваш об'єкт був незмінним, щоб його властивості не могли бути змінені або видалені, використовуйте `Object.freeze()`. `const immutableObj = Object.freeze({ key: "value" }); immutableObj.key = "newValue"; // Не працює, об'єкт залишається незміненим`

Синтаксис

let obj = {};
let obj = new Object();
let obj = Object.create({});

Переглядачі

Переглядач
	1	1	1	3	12

Переглядач
	4.4	18	4	1

Переглядач
	0.10.0	1.0

Приклади

JavaScript має вбудовані методи для роботи з об'єктами, такі як Object.keys(), Object.values() та Object.entries(). Ці методи можуть допомогти отримати доступ до ключів, значень або пар ключ-значення відповідно.

console.log(Object.keys(student)); // Виведе ["name", "age", "grade"]

У JavaScript об'єкти часто використовуються для зберігання даних у форматі "ключ-значення". Ключі є рядками (або символами), а значення можуть бути будь-яким типом даних.

const student = {
  name: "Олег",
  age: 20,
  grade: "А"
};

Доступ до властивостей об'єкта можна отримати за допомогою крапкової нотації або квадратних дужок. Якщо ключ складається з недопустимих символів або змінної, використовуйте квадратні дужки.

console.log(student.name);        // Виведе "Олег"
const prop = "age";
console.log(student[prop]);       // Виведе 20

Методи

addEventListener(): Додає обробник події до визначеного об'єкта.
alert(): Виводить модальне діалогове вікно з текстовим повідомленням.
keys(): Повертає масив із власними перелічуваними ключами заданого об'єкта.
valueOf(): Повертає примітивне значення вказаного об'єкта.
toString(): Повертає рядкове представлення об'єкта.
resizeBy(): Змінює розміри вікна на вказану величину.
scrollTo(): Встановлює абсолютну позицію прокрутки до вказаних координат на сторінці.
resizeTo(): Змінює розміри вікна на конкретні величини ширини та висоти.
setInterval(): Встановлює повторюване викликання функції з інтервалом часу у глобальному контексті.
scrollBy(): Додає зазначену кількість пікселів до поточної позиції прокрутки вікна.
setTimeout(): Затримує виконання функції чи коду на заданий інтервал часу перед викликом.
getComputedStyle(): Повертає об'єкт, що містить значення усіх CSS властивостей елемента.
moveTo(): Задає абсолютне положення вікна браузера на екрані.
stop(): Зупиняє виконання скрипта та завершує завантаження документа у вікні браузера.
matchMedia(): Перевіряє, чи задовольняють вказані медіа-запити параметрам вікна переглядача.
open(): Відкриває нове вікно браузера або вкладку.
removeEventlistener(): Видаляє обробник подій, що раніше був прикріплений через addEventListener().
moveBy(): Переміщує вікно браузера на вказану кількість пікселів відносно поточного положення.
print(): Викликає діалогове вікно друку для поточного вікна браузера.
clearInterval(): Зупиняє виконання повторюваних дій, заданих за допомогою setInterval().
prompt(): Викликає вікно для введення користувачем текстових даних.
blur(): Відміняє фокусування з обраного елемента на веб-сторінці.
clearTimeout(): Скасовує виконання запланованої дії, встановленої за допомогою setTimeout().
focus(): Дає фокус конкретному HTML-елементу, дозволяючи взаємодіяти з ним.
btoa(): Кодує рядок до формату base-64.
close(): Закриває вікно браузера, яке було відкрито за допомогою JavaScript.
confirm(): Відображає модальне вікно з повідомленням та кнопками "ОК" та "Скасувати".
atob(): Перетворює закодований у base-64 рядок на рядок ASCII.

Властивості

self: Повертає посилання на поточне вікно браузера чи фрейм безпосередньо з коду.
frameElement: Повертає елемент, в якому вбудовано поточне вікно.
scrollY: Повертає вертикальну позицію прокрутки вікна користувача на сторінці.
frames: Дозволяє доступ до колекції усіх фреймів у поточному вікні.
scrollX: Повертає горизонтальну позицію прокрутки вікна користувача на сторінці.
document: Представляє веб-сторінку, надаючи доступ до її вмісту та структури.
prototype: Базовий конструктор для створення об'єктів у JavaScript.
constructor: Вказує на функцію-конструктор, яка створила прототип об'єкта.
screenTop: Повертає верхню координату вікна відносно екрану користувача.
pageXOffset: Забезпечує відступ горизонтальної прокрутки вікна браузера.
screen: Надає інформацію про екран, таку як ширина та висота.
screenX: Повертає горизонтальну координату вікна відносно екрану користувача.
innerWidth: Забезпечує ширину внутрішньої області перегляду вікна браузера.
screenLeft: Повертає горизонтальне положення вікна на екрані у пікселях.
history: Дозволяє взаємодіяти з історією перегляду веб-сторінок браузера.
localStorage: Дозволяє зберігати дані локально в браузері користувача.
opener: Забезпечує посилання на вікно, яке відкрило поточне вікно.
innerHeight: Забезпечує висоту вікна перегляду браузера в пікселях.
location: Вказує поточну URL-адресу документа.
outerHeight: Визначає зовнішню висоту вікна браузера, включаючи рамки.
closed: Перевіряє, чи було закрите вікно браузера.
name: Визначає або повертає ім'я поточного вікна.
console: Використовується для виводу інформації у консоль розробника веб-браузера.
pageYOffset: Забезпечує вертикальний відступ прокрутки вікна браузера.
outerWidth: Повертає ширину зовнішнього розміру вікна браузера.
parent: Надає доступ до батьківського вікна чи фрейму веб-сайту.
status: Надає доступ до статусного рядка вікна для відображення короткого повідомлення сторінки.
top: Надає доступ до верхнього рівня вікна для маніпуляцій із контекстом.
sessionStorage: Зберігає дані у віконному сховищі сесії для тимчасового зберігання даних між сторінками.
screenY: Повертає вертикальну позицію вікна відносно екрану користувача.
defaultStatus: Встановлює або повертає стандартне повідомлення статусу для вікна браузера.

JS довідник

JavaScript

Наповнення JS розділу