JavaScript швидко: Об’єкти

Привіт! Чи знаєш ти, що JavaScript — це мова, орієнтована на об'єкти?

JavaScript є мовою програмування, орієнтованою на об'єкти (OOP). Це означає, що логіка програмування в JavaScript полягає в тому, щоб розбивати задачі на менші, багаторазові групи даних, такі як атрибути та процедури/методи, які можна використовувати як шаблон для створення "об'єктів". А об'єкти можуть бути використані для побудови даних і функцій.

Наслідування

Об'єкти JavaScript успадковують властивості (і методи) від Object.prototype. Об'єкти з null-прототипами не можуть успадковувати від Object.prototype.

class Cat{  
 furColor;  
 coatPattern;  
 name;   

 sayMeow(){  
 return this.lives, "Meows"  
 }  
}  

function myCat(){  
 let myCat = new Cat();  
 myCat.furColor="black";  
 myCat.coatPattern="solid";  
 myCat.name="Luna";  
 myCat.sayMeow();   
 myCat.lives=7;  
 return (`This is my cat, ${myCat.name} her fur is ${myCat.coatPattern} ${myCat.furColor} and she says ${myCat.sayMeow()} ${myCat.lives} times`);  
}  

console.log(myCat())

Властивості

JavaScript надає статичні утиліти/методи, такі як valueOf(), Object.hasOwn(), та Object.defineProperty(), які можна використовувати для роботи з об'єктами.

Якщо статичний метод недоступний, можна викликати Object.prototype безпосередньо за допомогою методу call().

class Cat{  
 furColor;  
 coatPattern;  
 name;  

 sayMeow(){  
 console.log(this.lives)  
 return "Meow"  
 }  
}  

function myCat(){  
 let myCat = new Cat();  
 myCat.furColor="black";  
 myCat.coatPattern="solid";  
 myCat.name="Luna";  
 myCat.sayMeow();   
 myCat.lives=7;  
 return (`This is my cat, ${myCat.name} her fur is ${myCat.coatPattern} ${myCat.furColor} and she says ${myCat.sayMeow()}`);  
}  


console.log(Object.hasOwn(myCat, 'name'))  
console.log(Object.valueOf(myCat()))  
myCat.call(Cat.sayMeow)

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

1) Object.assign()

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

Цей метод використовує Get для джерела і Set для цілі, і таким чином призначає властивості.

Результат для console.log(newCat) — це значення, яке повертає функція myCat().
Ви можете використовувати кілька об'єктів-джерел.

//source Object  
function myCat(){  
 let myCat = new Cat();  
 myCat.furColor="black";  
 myCat.coatPattern="solid";  
 myCat.name="Luna";  
 myCat.sayMeow();   
 myCat.lives=7;  
 return (  
 `This is my cat, ${myCat.name} her fur is ${myCat.coatPattern} ${myCat.furColor} and she says ${myCat.sayMeow()}`  
 //{myCat: `This is my cat, ${myCat.name} her fur is ${myCat.coatPattern} ${myCat.furColor} and she says ${myCat.sayMeow()}`}  
 );  
}  

//target object  
const newCat = Object.assign({}, [myCat()]);  
console.log(newCat)

Цей варіант повертає строкове значення “This is my cat, Luna her fur is solid black and she says Meow.” Вказівка джерела як масиву гарантує повернення рядка, а не окремих символів.

//source Object  
function myCat(){  
 let myCat = new Cat();  
 myCat.furColor="black";  
 myCat.coatPattern="solid";  
 myCat.name="Luna";  
 myCat.sayMeow();   
 myCat.lives=7;  
 return (  
 {myCat: `This is my cat, ${myCat.name} her fur is ${myCat.coatPattern} ${myCat.furColor} and she says ${myCat.sayMeow()}`}  
 );  
}  

//target object  
const newCat = Object.assign({}, myCat());  
console.log(newCat)

Це повертає пару ключ-значення, myCat: “This is my cat, Luna, her fur is solid black and she says Meow.”

//first source Object  
function myCat(){  
 let myCat = new Cat();  
 myCat.furColor="black";  
 myCat.coatPattern="solid";  
 myCat.name="Luna";  
 myCat.sayMeow();   
 myCat.lives=7;  
 return (  
 myCat   
 );  
}  

//second source object  
function newCat(){  
 let newCat = new Cat();  
 newCat.furColor="white";  
 newCat.coatPattern="solid"  
 newCat.name="Artemist";  
 return (newCat)  
}  

//target object  
let myCats = new Cat();  
myCats = Object.assign(myCats, [myCat(), newCat()]);  
console.log(myCats)

2) Object.create()

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

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

let pet = Object.create(myCat(), {  
 name:{  
 value: "Tabby",  
 enumerable: true,  
 writable: true  
 },  
 personality: {  
 value: function(){  
 return `${this.name} is cute`  
 }  
 }  
})  

console.log(pet.name)  
console.log(`My new cat ${pet.name} has ${pet.coatPattern} ${pet.furColor} fur and ${pet.personality()} when she says ${pet.sayMeow()}`)

В наведеному прикладі ми перезаписуємо властивість name з прототипу myCat().

3) Object.entries()

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

Це схоже на використання циклу for…in для ітерації.

for(const [key, value] of Object.entries(pet)){  
 console.log(`${key}: ${value}`)  
}  

const map = new Map(Object.entries(pet))  
console.log(map)

Альтернативно, можна використати статичні методи Object.keys() та Object.values(), щоб витягти лише ключі чи значення об'єкта.

Для додаткової інформації про об'єкти JavaScript та методи роботи з об'єктами, зверніться до документації JavaScript щодо об'єктів.

Перекладено з: JavaScript Quickly: Objects