У цьому посібнику ви дізнаєтесь про функцію конструктора JavaScript за допомогою прикладів.
У JavaScript функція конструктора використовується для створення об'єктів. Наприклад,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
У наведеному вище прикладі function Person()є функцією конструктора об’єктів.
Щоб створити об’єкт із функції конструктора, ми використовуємо newключове слово.
Примітка : Доброю практикою вважається використання великої літери першої літери вашої функції конструктора.
Створення декількох об'єктів за допомогою функції конструктора
У JavaScript ви можете створити кілька об'єктів із функції конструктора. Наприклад,
// constructor function function Person () ( this.name = 'John', this.age = 23, this.greet = function () ( console.log('hello'); ) ) // create objects const person1 = new Person(); const person2 = new Person(); // access properties console.log(person1.name); // John console.log(person2.name); // John
У наведеній вище програмі два об'єкти створюються за допомогою однієї і тієї ж функції конструктора.
JavaScript це ключове слово
У JavaScript, коли thisключове слово використовується у функції конструктора, thisпосилається на об'єкт під час створення об'єкта. Наприклад,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Отже, коли об'єкт отримує доступ до властивостей, він може безпосередньо отримати доступ до властивості як person1.name.
Параметри функції конструктора JavaScript
Ви також можете створити функцію конструктора з параметрами. Наприклад,
// constructor function function Person (person_name, person_age, person_gender) ( // assigning parameter values to the calling object this.name = person_name, this.age = person_age, this.gender = person_gender, this.greet = function () ( return ('Hi' + ' ' + this.name); ) ) // creating objects const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'female'); // accessing properties console.log(person1.name); // "John" console.log(person2.name); // "Sam"
У наведеному вище прикладі ми передали аргументи функції конструктора під час створення об’єкта.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Це дозволяє кожному об’єкту мати різні властивості. Як показано вище,
console.log(person1.name); дає Джон
console.log(person2.name); дає Сем
Створення об’єктів: функція конструктора проти літералу об’єкта
- Object Literal зазвичай використовується для створення єдиного об’єкта. Функція конструктора корисна, якщо ви хочете створити кілька об'єктів. Наприклад,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- Кожен об'єкт, створений із функції конструктора, є унікальним. Ви можете мати ті самі властивості, що і функція конструктора, або додати нову властивість до одного конкретного об'єкта. Наприклад,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Тепер ця ageвластивість унікальна для person1об’єкта і недоступна для person2об’єкта.
Однак, якщо об'єкт створюється за допомогою літералу об'єкта, і якщо змінну визначено з цим значенням об'єкта, будь-які зміни значення змінної змінять початковий об'єкт. Наприклад,
// using object lateral let person = ( name: 'Sam' ) console.log(person.name); // Sam let student = person; // changes the property of an object student.name = 'John'; // changes the origins object property console.log(person.name); // John
Коли об’єкт створюється за допомогою літералу об’єкта, будь-яка змінна об’єкта, похідна від цього об’єкта, буде діяти як клон вихідного об’єкта. Отже, будь-яка зміна, яку ви внесете в одному об'єкті, буде відображатися і в іншому об'єкті.
Додавання властивостей та методів в об'єкті
Ви можете додати властивості або методи в такий об’єкт:
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding property to person1 object person1.gender = 'male'; // adding method to person1 object person1.greet = function () ( console.log('hello'); ) person1.greet(); // hello // Error code // person2 doesn't have greet() method person2.greet();
Вихідні дані
привіт Uncaught TypeError: person2.greet не є функцією
У наведеному вище прикладі, нова властивість genderі новий метод greet()додаються до person1об'єкту.
Однак ця нова властивість і метод лише додаються до person1. Ви не можете отримати доступ genderабо greet()з person2. Отже, програма видає помилку при спробі отримати доступperson2.greet();
Прототип об’єкта JavaScript
Ви також можете додати властивості та методи до функції конструктора, використовуючи прототип . Наприклад,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding new property to constructor function Person.prototype.gender = 'Male'; console.log(person1.gender); // Male console.log(person2.gender); // Male
Щоб дізнатись більше про прототипи, відвідайте JavaScript Prototype.
Вбудовані конструктори JavaScript
JavaScript також має вбудовані конструктори. Деякі з них:
let a = new Object(); // A new Object object let b = new String(); // A new String object let c = new Number(); // A new Number object let d = new Boolean(); // A new Boolean object
У JavaScript рядки можна створювати як об'єкти за допомогою:
const name = new String ('John'); console.log(name); // "John"
У JavaScript числа можна створювати як об'єкти за допомогою:
const number = new Number (57); console.log(number); // 57
У JavaScript логічні значення можна створити як об'єкти за допомогою:
const count = new Boolean(true); console.log(count); // true
Примітка : Рекомендується використовувати примітивні типи даних і створювати їх звичайним способом, наприклад const name = 'John';, const number = 57;таconst count = true;
Не слід оголошувати рядки, числа та логічні значення як об'єкти, оскільки вони уповільнюють роботу програми.
Примітка : У JavaScript ключове слово classбуло введено в ES6 (ES2015), що також дозволяє нам створювати об’єкти. Класи подібні до функцій конструктора в JavaScript. Щоб дізнатись більше, відвідайте курси JavaScript.
