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.

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

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

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

Синтаксис

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

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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

Методи

Властивості