Object у JavaScript — базовий об'єкт і його методи

Вступ до об'єкта 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 завжди слід бути обережним та розуміти можливі наслідки внесених змін.

правити

Загальний опис

правити

Порада

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

автор: Bond правити

Порада

Використовуйте деструктивне присвоєння. Ця особливість ES6 дозволяє вам легко видобути значення властивостей з об'єктів.

const person = { firstName: "Олександр", lastName: "Іванов" };
const { firstName, lastName } = person;
console.log(firstName); // Виведе "Олександр"

автор: Bond правити

Нотатка

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

const obj1 = { key: "value" };
const obj2 = obj1;
obj2.key = "newValue";
console.log(obj1.key); // Виведе "newValue", а не "value"

автор: Bond правити

Нотатка

Якщо вам потрібно створити повну копію об'єкта (не посилання), враховуючи вкладені об'єкти, розгляньте використання таких методів, як рекурсивна функція або JSON.parse() разом із JSON.stringify().

const deepCopy = JSON.parse(JSON.stringify(originalObject));

автор: Bond правити

Нотатка

Якщо ви хочете, щоб ваш об'єкт був незмінним, щоб його властивості не могли бути змінені або видалені, використовуйте Object.freeze().

const immutableObj = Object.freeze({ key: "value" });
immutableObj.key = "newValue"; // Не працює, об'єкт залишається незміненим

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

методи

властивості

Переглядачі

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

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

const student = {
    name: 'Олег'
};

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

const student = 'значення';

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

const a = { name: 'Аня', address: { city: 'Львів' } };

const b = a;            // НЕ копія — друге імʼя тієї самої коробки
b.name = 'Оля';
console.log('a.name після зміни через b →', a.name);          // Оля

const c = { ...a };     // копія, але поверхнева
c.address.city = 'Одеса';
console.log('a.address.city після зміни через c →', a.address.city);  // Одеса

const d = structuredClone(a);   // справжня глибока копія
d.address.city = 'Київ';
console.log('a.address.city після зміни через d →', a.address.city);  // Одеса

console.log('{} === {} →', {} === {});          // false: порівняння за посиланням
console.log('однаковий вміст →', JSON.stringify({ x: 1 }) === JSON.stringify({ x: 1 }));

const keys = {};
keys[1] = 'число';
keys['1'] = 'рядок';
console.log('obj[1] і obj["1"] — один ключ →', keys);

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