Об'єкти в JavaScript

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

Об'єкти JavaScript дозволяють зберігати та обробляти різні дані та функції, пов'язані з ними. Об'єкт – це колекція з ключа та його значення, де ключ – це рядок, а значення – це будь-який тип даних, наприклад:

У цьому прикладі ми створили об'єкт person, який має чотири властивості: name, age, hobbies і sayHello. Перші три властивості зберігають прості дані (рядок, число та масив), а четверта властивість зберігає функцію, яку ми можемо викликати як метод об'єкта. Для доступу до властивостей та методів об'єкта ми можемо використовувати точкову нотацію або квадратні дужки:

console.log(person.name); // "Alice" console.log(person["age"]); // 25 console.log(person.hobbies[0]); // "reading" console.log(person.sayHello()); // "Hello, I'm Alice"

Об'єкти та їх властивості

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

person.height = 170; // Додаємо нову властивість person.age = 26; // Змінюємо існуючу властивість delete person.hobbies; // Видаляємо властивість

Індекси властивостей об'єкту

Індекс властивості об'єкта — це рядок, який використовується для доступу до значення властивості. Індекси можуть бути будь-якими допустимими рядками JavaScript, включаючи порожні рядки. Однак не всі рядки є допустимими ідентифікаторами (іменами змінних), тому для них потрібно використовувати квадратні дужки замість точкової нотації, наприклад:

const obj = <>; obj.number = 477; obj[''] = 'empty'; // Порожній рядок obj['1'] = 'one'; // Рядок із цифри obj['hello world'] = 'greeting'; // Рядок із пробілом console.log(obj) // // Використання квадратних дужок console.log(obj['']); // empty console.log(obj['1']); // one console.log(obj['hello world']); // greeting // Використання точкової нотації призводить до синтаксичної помилки console.log (obj.1); // SyntaxError console.log(obj.hello world); // SyntaxError

Як бачимо, щоб отримати доступ до властивостей з індексами, які не є допустимими ідентифікаторами, ми маємо використовувати квадратні дужки.

Як визначити існує потрібна властивість в об'єкті чи ні

Щоб визначити, чи існує властивість, використовуйте оператор in. Він повертає true, якщо об'єкт має властивість із заданим ім'ям, та false інакше. Також перевіряється, чи є властивість прототипу об'єкта.

const person = <name: 'Igor', age: 30, >; console.log('name' in person); // true console.log('height' in person); // false console.log('toString' in person); // true - успадковується від Object.prototype

Як перебрати властивості об'єкту

Цикл for ... in - це спосіб перебрати всі властивості об'єкта і виконати деяку дію для кожного з них:

for (var key in person) < console.log(key + ": " + person[key]); >// name: Alice // age: 26 // sayHello: function () < // console.log("Hello, I'm" + this.name); //>// height: 170

Упорядкування властивостей об'єкту

Властивості об'єкта JavaScript не мають певного порядку. Однак, при переборі властивостей об'єкта за допомогою циклу for…in або методу Object.keys, вони зазвичай виводяться в такому порядку: спочатку йдуть властивості з цілими індексами у зростаючому порядку, потім йдуть інші властивості в порядку їх створення.

const obj = <>; obj[2] = 'two'; obj[1] = 'one'; obj['name'] = 'Sveta'; obj[3] = 'tree'; obj['age'] = 23; for (var key in obj) < console.log(key + ':' + obj[key]); >// 1:one // 2:two // 3:tree // name:Sveta // age:23

Видалення властивостей

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

const person = <name: "Alice", age: 25, hobbies: ["reading", "dancing"] >; delete person.age; // Видаляємо властивість age console.log(person.age); // undefined delete person.hobbies[0]; // Видаляємо елемент масиву console.log(person.hobbies); //[undefined, “dancing”] delete person; // Видаляємо об'єкт console.log(person); // ReferenceError: person is not defined

Однак, якщо властивість має атрибут configurable: false, то воно не може бути видалено:

const obj = Object.create(<>, < x: < value: 10, writable: true, enumerable: true, configurable: false >>); console.log(obj.x); //10 delete obj.x; // не видаляє властивість x console.log(obj.x); // 10

Визначення властивостей типу об'єкта

Тип об'єкта - це класифікація об'єктів за їхньою внутрішньою структурою та поведінкою. JavaScript має вбудовані типи об'єктів, такі як Array, Date, Function, Math та інші, а також типи об'єктів, які ми можемо створювати за допомогою функцій конструкторів або методу Object.create. Кожен тип об'єкта має власні властивості та методи, які доступні для всіх його екземплярів, наприклад:

const arr = [1, 2, 3]; // Створюємо масив - екземпляр типу Array console.log(arr.length); // 3 - властивість length визначено типу Array console.log(arr.push(4)); // 4 - метод push визначений типу Array const date = new Date(); // Створюємо дату - екземпляр типу Date console.log(date.getFullYear()); // 2023 - метод getFullYear визначений типу Date console.log(date.getTimezoneOffset()); // -180 - метод getTimezoneOffset визначено типу Date const func = function () < >; // Створюємо функцію – екземпляр типу Function console.log(func.name); // "" - властивість name визначено типу Function console.log(func.call()); // undefined - метод call визначений типу Function

Для визначення властивостей об'єкта можна використовувати його прототип. Властивості прототипу є спільними для кожного екземпляра даного типу. Властивість prototype характерно для кожного типу об'єкта:

function Animal(name, type) < this.name = name; this.type = type; >Animal.prototype.makeSound = function () < console.log(this.name + "says" + this.type); >; const dog = new Animal("Rex", "woof"); const cat = new Animal("Tom", "meow"); dog.makeSound(); // Rex says woof cat.makeSound(); // Tom says meow

Ми визначили метод makeSound для Animal через його зразок. Тепер усі екземпляри цього можуть застосовувати цей метод. Це заощаджує пам'ять і уникає дублювання коду.

Створення нових об'єктів

Існує кілька способів створення нових об'єктів у JavaScript ↓

• Використання ініціалізаторів об'єкту. Ініціалізатором називається літерал, який визначає властивості та методи об'єкта. Це найпростіший і найзручніший метод створення об'єктів. Наприклад:

• Застосування функції архітектора. Функція конструктора – це спеціальна функція, яка створює новий об'єкт під час виклику з оператором new. Вона має ім'я з великої літери та приймає параметри для ініціалізації властивостей об'єкта. Всередині функції конструктора ми маємо право використовувати слово this для посилання на об'єкт, що ініціалізується:

function Animal(name, type) < this.name = name; this.type = type; this.makeSound = function () < console.log(this.name + 'says' + this.type); >; > const dog = new Animal('Rex', 'woof'); const cat = new Animal('Tom', 'meow');

• Використання методу Object.create. Метод Object.create - Це сучасний спосіб створення об'єктів, який дозволяє успадковувати їх від інших об'єктів. Він приймає два параметри: прототип об'єкта, від якого ми хочемо успадкувати, та дескриптори властивостей, які ми хочемо додати або перевизначити:

const person = < name: 'Alice', age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >, >; const student = Object.create(person, < grade: < value: 10, writable: true, enumerable: true, configurable: true >, study: < value: function () < console.log(this.name + ' is studying '); >, writable: true, enumerable: true, configurable: true, >, >);

У цьому прикладі ми створили об'єкт student, який успадковує всі властивості та методи від об'єкта person, а також додали дві нові властивості: grade і study. Дескриптори властивостей дозволяють встановити різні атрибути властивостей, такі як можливість запису, перерахування та конфігурації.

Порівняння об'єктів

• Для порівняння об'єктів ми можемо використовувати оператори == та ===. Однак вони не порівнюють об'єкти за їх змістом, а лише за їх посиланнями. Тобто, два об'єкти рівні лише тоді, коли вони посилаються на той самий об'єкт у пам'яті:

var person1 =; var person2 =; var person3 = person1; console.log(person1 == person2); // false console.log(person1 === person2); // false console.log(person1 == person3); // true console.log(person1 === person3); // true

Об'єкти person1 і person2, хоча мають однакові властивості, не рівні одне одному, оскільки вони є різними об'єктами у пам'яті. А об'єкт person3 дорівнює об'єкту person1тому що він посилається на нього.

• Для порівняння об'єктів за їх змістом ми можемо застосовувати спеціальні функції, які рекурсивно перевіряють всі властивості об'єктів на рівність, наприклад:

function isEqual(obj1, obj2) < if (obj1 === obj2) return true; // якщо посилання дорівнюють, то об'єкти дорівнюють if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false; // якщо один із аргументів не об'єкт, то об'єкти не рівні const keys1 = Object.keys(obj1); // Отримуємо масив ключів першого об'єкта const keys2 = Object.keys(obj2); // Отримуємо масив ключів другого об'єкта if (keys1.length !== keys2.length) return false; // якщо довжини масивів ключів не дорівнюють, то об'єкти не дорівнюють for (var key of keys1) < // перебираємо всі ключі першого об'єкта if (!obj2.hasOwnProperty(key)) return false; // якщо другий об'єкт немає такого ключа, то об'єкти не рівні if (!isEqual(obj1[key], obj2[key])) return false; // якщо значення ключа не рівні, то об'єкти не рівні (рекурсивний виклик) >return true; // якщо всі перевірки пройдені, об'єкти рівні > var person1 = < name: 'Alice', age: 25, hobbies: ['reading', 'dancing'] >; var person2 = < name: 'Alice', age: 25, hobbies: ['reading', 'dancing'] >; var person3 = person1; console.log(isEqual(person1, person2)); // true console.log(isEqual(person1, person3)); // true

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

успадкування

Спадкування – це механізм, який дозволяє одному об'єкту отримувати властивості та методи від іншого об'єкта. Це потрібно для того, щоб використовувати код ще раз і при цьому максимально уникнути дублювання. У JavaScript успадкування ґрунтується на прототипах, тобто на спеціальних об'єктах, які є прабатьками інших об'єктів. Всі об'єкти мають властивість [[Prototype]], що посилається на його прототип.Коли ми намагаємося отримати доступ до властивості або методу об'єкта, який у нього відсутній, JavaScript шукає його у прототипі. Якщо його там не знайдено, то пошук триває ланцюжком прототипів до найвищого рівня — до об'єкта Object.prototypeщо є прототипом всіх об'єктів. Давайте розглянемо на прикладі:

const person = < name: 'Alice', age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >, >; const student = Object.create(person); student.grade = 10; student.study = function() < console.log(this.name + 'is studying'); >; student.sayHello(); // Hello, I'm Alice student.study(); // Alice is studying console.log(student.age); // 25 console.log(student.hasOwnProperty('name')); // false console.log(student.hasOwnProperty('grade')); // true

Об'єкт student успадковує властивості та методи від об'єкта person через його прототип. Він також має власні властивості grade і Студія. Метод hasOwnProperty дозволяє перевірити, чи є властивість власною або успадкованою.

Визначення методів

Метод – це функція, яка належить об'єкту і може використовувати його дані через ключове слово this. Методи можуть бути визначені як:

const person = < name: "Alice", age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >>; person.sayHello(); // Hello, I'm Alice

function Animal(name, type) < this.name = name; this.type = type; >Animal.prototype.makeSound = function () < console.log(this.name + "says" + this.type); >; const dog = new Animal("Rex", "woof"); dog.makeSound(); // Rex says woof

У цих прикладах бачимо два способи визначення методів: як властивість об'єкта person і як властивість прототипу типу Animal.

Використання цього посилання на об'єкт

Ключове слово this JavaScript використовується для посилання на поточний об'єкт, у контексті якого виконується код. Значення this залежить від того, як і де викликається функція:

• Якщо функція викликається як метод об'єкта, то this посилається на цей об'єкт:

const person = < name: "Alice", age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >>; person.sayHello(); // Hello, I'm Alice

Тут ми викликаємо функцію sayHello як метод об'єкта personтому this всередині функції посилається на об'єкт person.

• Однак, стрілочна функція всередині об'єкта не працюватиме з цим, а посилатиметься відразу на глобальний об'єкт (window у браузері або global в Node.js):

var lastName = 'Іваненко'; const person = < lastName: 'Dubova', age: 25, sayHello: () =>< console.log("Hello, I'm " + this.lastName); >, >; person.sayHello(); //Hello, I'm Ivanenko - виведе ім'я із глобальної області видимості

Важливо! У глобальну область видимості потрапляють змінні, оголошені за допомогою var. Змінні, оголошені за допомогою let і const будуть видавати Hello, I'm undefined.

• Якщо функція викликається як звичайна функція, то this також буде посилатися на глобальний об'єкт:

function sayHello() < firstName: "Dima", console.log("Hello, I'm" + this.firstName); >var firstName = "Pasha"; // Змінна у світовій області видимості sayHello(); // Hello, I'm Pasha function sayBye() < console.log("Hello, I'm" + this.lastName); >const lastName = "Durov"; // Змінна у блочній області видимості sayBye(); // Hello, I'm undefined

Ми викликаємо функцію sayHello як звичайну функцію, тому this всередині функції посилається на глобальний об'єкт, який має властивість name зі значенням "Bob".

• Якщо функція викликається з оператором new, то this посилається на новий об'єкт, який створюється під час виклику функції:

function Animal(name, type) < this.name = name; this.type = type; >const dog = new Animal("Rex", "woof"); console.log(dog.name); // Rex console.log(dog.type); // woof

На цей раз ми викликаємо функцію Animal з оператором new, тому цявсередині функції посилається на новий об'єкт dog, який отримує властивості name і type.

• Якщо функція викликається з методами call або apply, то this посилається на об'єкт, який передається як перший аргумент цих методів:

function sayHello() < console.log("Hello, I'm" + this.name); >const person = <name: "Alice", age: 25>; sayHello.call(person); // Hello, I'm Alice sayHello.apply(person); // Hello, I'm Alice

У цих прикладах ми викликаємо функцію sayHello з методами call і apply, this всередині функції посилається на об'єкт person, який передається як перший аргумент цих методів.

Визначення гетерів та сеттерів

Геттери та сеттери – це спеціальні методи, які дозволяють отримувати та встановлювати значення властивостей об'єкта за допомогою додаткової логіки. Вони визначаються за допомогою ключових слів get і set всередині літералу об'єкта або дескриптора властивості ↓

const person = <name: "Alice", age: 25, get fullName() < return this.name + "Smith"; >, set fullName(value) < var parts = value.split(" "); this.name = parts[0]; this.lastName = parts[1]; >>; console.log(person.fullName); // Alice Smith person.fullName = "Bob Jones"; console.log(person.name); // Bob console.log(person.lastName); // Jones

Ми задали геттер та сетер для властивості fullName об'єкта person. Геттер повертає повне ім'я з імені та прізвища. Сеттер розбиває повне ім'я на частини та встановлює ім'я та прізвище.

* Як використовувати гетери та сектори в класах читайте тут.

Object

Ця особливість є добре створеною і роботою, пов'язаною з багатьма пристроями і розробниками версій. It's been available across browsers since July 2015 .

Тип Object представляє один із типів даних JavaScript. Він використовується для зберігання різних колекцій з ключами та більш складних сутностей. Об'єкти можуть бути створені за допомогою конструктора Object() або синтаксису ініціалізатора/літералу об'єкта.

Опис

Майже всі об'єкти JavaScript є екземплярами Object ; Типовий об'єкт успадковує властивості (включаючи методи) від Object.prototype, хоча ці властивості можуть бути затінені (тобто перевизначені). Єдині об'єкти, які не успадковують від Object.prototype, - це ті, у яких прототип null, або які походять від інших об'єктів з прототипом null.

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

Синтаксис

// Ініціалізатор об'єкта або літерал <[ nameValuePair1[, nameValuePair2[, . nameValuePairN] ] ] >// Виклик як конструктор new Object([value])

Параметри

Пари з імен (рядки) та значень (будь-які значення), де ім'я відокремлюється від значення двокрапкою.

Властивості конструктора Object

Дозволяє додавати властивості до всіх об'єктів типу Object.

Методи конструктора Object

Створює новий об'єкт шляхом копіювання значень всіх власних перерахованих властивостей з однієї або більше вихідних об'єктів цільової об'єкт.

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

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

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

Заморожує об'єкт: інший код не зможе видалити або змінити властивість.

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

Повертає масив, що містить імена всіх переданих об'єкту власних перелічуваних і неперелічуваних властивостей.

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

Повертає прототип вказаного об'єкта.

Визначає, чи є два значення помітними (тобто однаковими)

Визначає, чи дозволено розширення об'єкта.

Визначає, чи об'єкт був заморожений.

Визначає, чи об'єкт є запечатаним (sealed).

Повертає масив, що містить імена всіх власних перерахованих властивостей переданого об'єкта.

Асинхронно спостерігає за змінами об'єкта.

Запобігає будь-якому розширенню об'єкта.

Запобігає видаленню властивостей об'єкта іншим кодом.

Встановлює прототип (тобто внутрішня властивість [[Prototype]] )

Примірники та прототип об'єкта Object

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

Властивості

Перетворює вхідні дані на об'єкт.

Вказує на функцію, яка створює прототип об'єкта.

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

Методи

Зв'язує функцію з властивістю, яка при зверненні до нього виконує цю функцію і повертає її значення, що повертається.

Зв'язує функцію з властивістю, яка виконує при встановленні ту функцію, яка змінює властивість.

Повертає функцію, прив'язану як засіб отримання до зазначеної властивості.

Повертає функцію, прив'язану як установник до зазначеної властивості.

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

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

Повертає логічне значення, що вказує, чи є властивість об'єкта enumerable own.

Повертає рядкову виставу об'єкта.

Повертає примітивне значення вказаного об'єкта.

Приклади

Приклад: використання Object з типами undefined та null

Наступні приклади зберігають порожній об'єкт Object змінну o :

const o = new Object(); const o = new Object(undefined); const o = new Object(null);

Приклад: використання Object для створення об'єктів Boolean

Наступний приклад зберігає об'єкти Boolean у змінну o:

// еквівалентно o = new Boolean (true); const o = new Object(true);

// Еквівалентно o = new Boolean (false); const o = new Object(Boolean());

Специфікації

Сумісність із браузерами

BCD tables only load in the browser

Дивіться також

Об'єкти

Як ми знаємо з розділу Типи даних, JavaScript існує 8 типів даних. Сім із них називаються «примітивними», оскільки містять лише одне значення (чи то рядок, число чи щось інше).

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

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

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

Порожній об'єкт («порожній ящик») можна створити, використовуючи один із двох варіантів синтаксису:

let user = новий Object(); // Синтаксис "конструктор об'єкта" let user = <>; // синтаксис "літерал об'єкта"

Зазвичай використовують варіант із фігурними дужками. >. Таке оголошення називають літералом об'єкта або літеральною нотацією.

Літерали та властивості

При використанні літерального синтаксису <. >ми одразу можемо помістити в об'єкт кілька властивостей у вигляді пар «ключ: значення»:

Кожна властивість має ключ (також званий «ім'я» або «ідентифікатор»). Після імені властивості слідує двокрапка ":" , а потім вказується значення властивості. Якщо об'єкті кілька властивостей, всі вони перераховуються через кому.

В об'єкті user зараз знаходяться дві властивості:

1. Перша властивість з ім'ям "name" та значенням "John".
2. Друга властивість з ім'ям "age" та значенням 30 .

Можна сказати, що наш об'єкт user - це скринька з двома папками, підписаними "name" та "age".

Ми можемо в будь-який момент додати нові папки, видалити папки або прочитати вміст будь-якої папки.

Для звернення до властивостей використовується запис «через точку»:

// отримуємо властивості об'єкта: alert(user.name); // John alert (user.age); // 30

Значення може бути будь-якого типу. Давайте додамо властивість із логічним значенням:

Для видалення властивості ми можемо використовувати оператор delete:

Ім'я властивості може складатися з кількох слів, але тоді воно має бути укладене в лапки:

Остання властивість об'єкта може закінчуватися комою:

Це називається «виска кома». Такий підхід спрощує додавання, видалення та переміщення властивостей, оскільки всі рядки об'єкта стають однаковими.

Об'єкт, оголошений через const може бути змінено.

const user = <name: "John">; user.name = "Pete"; //(*) alert(user.name); // Pete

Може здатися, що рядок (*) повинен викликати помилку, але ні, тут все гаразд. Справа в тому, що оголошення const захищає від змін лише саму змінну user, а не її вміст.

Визначення const видасть помилку лише якщо ми надамо змінній інше значення: user=. .

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

Квадратні дужки

Для властивостей, імена яких складаються з кількох слів, доступ до значення через точку не працює:

// це викликає синтаксичну помилку user.likes birds = true

JavaScript бачить, що ми звертаємося до властивості user.likes, а потім йде незрозуміле слово birds. Через війну синтаксична помилка.

Точка вимагає, щоб ключ іменували за правилами іменування змінних. Тобто не мав прогалин, не починався з цифри та не містив спеціальні символи, крім $ та _ .

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

let user = <>; // привласнення значення властивості user["likes birds"] = true; // одержання значення якості alert(user["likes birds"]); // true // видалення властивості delete user["likes birds"];

Нині все гаразд. Зверніть увагу, що рядок у квадратних дужках поміщений у лапки (підійде будь-який тип лапок).

Квадратні дужки також дозволяють звернутися до властивості, ім'я якої може бути результатом виразу. Наприклад, ім'я властивості може зберігатися у змінній:

let key = "likes birds"; // те саме, як і user["likes birds"] = true; user[key] = true;

Тут змінна key може бути обчислена під час виконання коду або залежати від введення користувача. Після цього ми використовуємо її для доступу до якості. Це дає нам більшу гнучкість.

let user = <name: "John", age: 30>; let key = prompt("Що ви хочете дізнатися про користувача?", "name"); // Доступ до властивості через змінну alert (user [key]); // John (якщо ввели "name")

Запис «через точку» такого не дозволяє:

let user = <name: "John", age: 30>; let key = "name"; alert(user.key); // undefined

Обчислювані властивості

Ми можемо використовувати квадратні дужки в літеральній нотації для створення обчислюваної властивості.

let fruit = prompt("Який фрукт купити?", "apple"); let bag = <[fruit]: 5, // ім'я властивості буде взято зі змінної fruit>; alert(bag.apple); // 5, якщо fruit="apple"

Сенс обчислюваного властивості простий: запис [fruit] означає, що ім'я властивості необхідно взяти зі змінної fruit .

І якщо відвідувач введе слово "apple", то в об'єкті bag тепер лежатиме властивість.

По суті, приклад вище працює так само, як і такий приклад:

let fruit = prompt("Який фрукт купити?", "apple"); let bag = <>;

…Але перший приклад виглядає лаконічніше.

Ми можемо використовувати і складніші вирази у квадратних дужках:

let fruit = 'apple'; let bag = <[fruit + 'Computers']: 5 // bag.appleComputers = 5>;

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

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

Властивість із змінної

У реальному коді часто нам необхідно використовувати існуючі змінні як значення властивостей з тим самим ім'ям.

function makeUser(name, age) < return < name: age: age // .

У прикладі вище назва властивостей name та age збігаються з назвами змінних, які ми підставляємо як значення цих властивостей. Такий підхід настільки поширений, що існують спеціальні короткі властивості для спрощення цього запису.

Замість name:name ми можемо написати просто name:

function makeUser(name, age) < return < name, // те саме, що й name: name age // те саме, що й age: age // ;

Ми можемо використовувати як звичайні властивості, так і короткі в тому самому об'єкті:

Обмеження на імена властивостей

Як ми вже знаємо, ім'я змінної не може збігатися із зарезервованими словами, такими як for, let, return і т.д.

Але для властивостей об'єкта такого обмеження немає:

// ці імена властивостей припустимі let obj = < for: 1, let: 2, return: 3>; alert(obj.for + obj.let + obj.return); // 6

Іншими словами, немає жодних обмежень до імен властивостей. Вони можуть бути у вигляді рядків або символів (спеціальний тип для ідентифікаторів, який буде розглянуто пізніше).

Всі інші типи даних будуть автоматично перетворені на рядок.

Наприклад, якщо використовувати число 0 як ключ, воно перетвориться на рядок "0" :

let obj = < 0: "Тест" // те саме, що і "0": "Тест" >; // обидві функції alert виведуть те саме властивість (число 0 перетворюється на рядок "0") alert( obj["0"] ); // Тест alert(obj[0]); // Тест (те ж властивість)

Є невеликий підводний камінь, пов'язаний із спеціальною властивістю __proto__. Ми не можемо встановити його в необ'єктне значення:

let obj = <>; obj.__proto__ = 5; // Надамо число alert(obj.__proto__); //[object Object], значення - це об'єкт, тобто. не те, що ми очікували

Як бачимо, присвоєння примітивного значення 5 ігнорується.

Ми докладніше досліджуємо особливості властивості __proto__ у наступних розділах Прототипне наслідування, а також запропонуємо способи виправлення такої поведінки.

Перевірка існування якості, оператор «in»

На відміну від багатьох інших мов, особливість JavaScript-об'єктів у тому, що можна отримати доступ до будь-якої якості. Навіть якщо властивості немає – помилки не буде!

При зверненні до властивості, якої немає, повертається undefined. Це дозволяє легко перевірити існування якості:

let user = <>; alert( user.noSuchProperty === undefined ); // true означає "властивості немає"

Також існує спеціальний оператор "in" для перевірки існування якості в об'єкті.