JavaScript Конструктори об’єктів
Приклад
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Спробуйте самі »Вважається гарною практикою називати функції-конструктори з першої літери в верхньому регістрі.
Типи об’єктів (плани) (класи)
Приклади з попередніх розділів обмежені. Вони створюють лише окремі об’єкти.
Іноді нам потрібен "план" для створення великої кількості "однотипних" об’єктів.
Спосіб створення "типу об’єкту" заключається у використанні функції конструктора об’єкту.
В наведеному вище прикладі function Person() є функцією конструктора об’єкту.
Об’єкти одного типу створюються шляхом виклику функції-конструктора з ключовим словом new:
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
Спробуйте самі »
Ключове слово this
В JavaScript об’єкт, що називається this, є об’єктом, якому "належить" код.
Значення this при використанні в об’єкті - це сам об’єкт.
В функції-конструкторі this не має значення. Це заміна новому об’єкту. Значення this стане новим об’єктом при створенні нового об’єкту.
Зверніть увагу, що this не є змінною. Це ключове слово. Ви не можете змінити значення this.
Додавання властивості до об’єкту
Додати нову властивість до існуючого об’єкту дуже просто:
Властивість буде додано до myFather. Не до myMother. (Жодному іншому об’єкту person).
Додавання методу до об’єкту
Додати новий метод до існуючого об’єкту дуже просто:
Приклад
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
Спробуйте самі »
Метод буде додано до myFather. Не до myMother. (Жодному іншому об’єкту person).
Додавання властивості в конструктор
Ви не можете додати нову властивість в конструктор об’єкту так само як ви додаєте нову властивість в існуючий об’єкт:
Щоб додати нову властивість в конструктор, ви маєте додати його в функцію конструктора:
Приклад
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
Спробуйте самі »
Таким чином, властивості об’єкту можуть мати значення за замовчуванням.
Додавання методу в конструктор
Функція-конструктор також може визначати методи:
Приклад
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {
return this.firstName + " " + this.lastName;
};
}
Спробуйте самі »
Ви не можете додати новий метод до конструктора об’єкту так само, як ви додаєте новий метод до існуючого об’єкту.
Додавання методів в конструктор об’єкту має виконуватись всередині функції конструктора:
Приклад
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
Функція changeName() присвоює значення name властивості lastName персони.
JavaScript знає, про яку людину ви говорите, шляхом "підстановки" this до myMother.
Вбудовані конструктори JavaScript
JavaScript має вбудовані конструктори для власних об’єктів:
new String() // Новий об’єкт String
new Number() // Новий об’єкт Number
new Boolean() // Новий об’єкт Boolean
new Object() // Новий об’єкт Object
new Array() // Новий об’єкт Array
new RegExp() // Новий об’єкт RegExp
new Function() // Новий об’єкт Function
new Date() // Новий об’єкт Date
Спробуйте самі »
Об’єкт Math() відсутній в списку. Math - глобальний об’єкт. Ключове слово new не можна використовувати в Math.
Ви знаєте?
Як видно вище, в JavaScript є об’єктні версії примітивних типів даних String, Number та Boolean. Але немає сенсу створювати складні об’єкти. Примітивні значення набагато швидше:
Використовуйте рядкові літерали "" замість new String().
Використовуйте числовые літерали 50 замість new Number().
Використовуйте булеві (логічні) літерали true / false замість new Boolean().
Використовуйте об’єктні літерали {} замість new Object().
Використовуйте літерали масивів [] замість new Array().
Використовуйте шаблонні літерали /()/ замість new RegExp().
Використовуйте вирази функцій () {} замість new Function().
Приклад
let x1 = ""; // новий примітивний рядок
let x2 = 0; // нове примітивне число
let x3 = false; // нове примітивне булеве значення
const x4 = {}; // новий об’єкт Object
const x5 = []; // новий об’єкт масиву
const x6 = /()/ // новий об’єкт RegExp
const x7 = function(){}; // нова функція
Спробуйте самі »
Рядкові об’єкти
Зазвичай рядки створюються як примітиви: firstName = "John"
Але рядки також можна створювати як об’єкти за допомогою ключового слова new:firstName = new String("John")
Дізнайтесь, чому рядки не повинні створюватись як об’єкт, в розділі JS Рядки.
Числові об’єкти
Зазвичай числа створюються як примітиви: x = 30
Але числа також можна створювати як об’єкти за допомогою ключового слова new:x = new Number(30)
Дізнайтесь, чому числа не повинні створюватись як об’єкти, в розділі JS Числа.
Булеві (логічні) об’єкти
Зазвичай булеві (логічні) значення створюються як примітиви: x = false
Але логічні значення також можна створювати як об’єкти за допомогою ключового слова new:x = new Boolean(false)
Дізнайтесь, чому логічні значення не слід створювати як об’єкти в розділі JS Булеві значення.
