У цьому посібнику ви дізнаєтеся про прототипи в JavaScript за допомогою прикладів.
Перш ніж вивчати прототипи, обов’язково перегляньте ці підручники:
- Об'єкти JavaScript
- Функція конструктора JavaScript
Як відомо, ви можете створити об’єкт у JavaScript за допомогою функції конструктора об’єктів. Наприклад,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
У наведеному вище прикладі function Person()є функцією конструктора об’єктів. Ми створили два об'єкти person1і person2з нього.
Прототип JavaScript
У JavaScript кожна функція та об'єкт має властивість з іменем prototype за замовчуванням. Наприклад,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
У наведеному вище прикладі ми намагаємось отримати доступ до властивості прототипу Personфункції конструктора.
Оскільки властивість прототипу на даний момент не має значення, воно відображає порожній об'єкт (…).
Спадщина прототипу
У JavaScript прототип може використовуватися для додавання властивостей та методів до функції конструктора. А об’єкти успадковують властивості та методи від прототипу. Наприклад,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Вихідні дані
(стать: "самець") самець чоловічої статі
У наведеній вище програмі ми додали нову властивість genderдо функції Personконструктора, використовуючи:
Person.prototype.gender = 'male';
Потім об'єкт person1і person2успадковує властивість genderвід властивості прототипу Personфункції конструктора.
Отже, і об'єкти, person1і person2можуть отримати доступ до гендерної властивості.
Примітка: Синтаксис для додавання властивості до функції конструктора об’єкта:
objectConstructorName.prototype.key = 'value';
Прототип використовується для надання додаткових властивостей всім об'єктам, створеним із функції конструктора.
Додавання методів до функції конструктора за допомогою прототипу
Ви також можете додати нові методи до функції конструктора, використовуючи прототип. Наприклад,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
У наведеній вище програмі новий метод greetдодано до функції Personконструктора за допомогою прототипу.
Зміна прототипу
Якщо значення прототипу змінено, тоді всі нові об’єкти матимуть змінене значення властивості. Усі раніше створені об'єкти матимуть попереднє значення. Наприклад,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Примітка . Не слід модифікувати прототипи стандартних вбудованих об’єктів JavaScript, таких як рядки, масиви тощо. Це вважається поганою практикою.
Мережа прототипів JavaScript
Якщо об'єкт намагається отримати доступ до тієї самої властивості, що є у функції конструктора та об'єкта-прототипу, об'єкт бере властивість у функції конструктора. Наприклад,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
У наведеній вище програмі ім'я властивості оголошується у функції конструктора, а також у властивості прототипу функції конструктора.
Коли програма виконується, person1.nameшукає у функції конструктора, чи є властивість з іменем name. Оскільки функція конструктора має властивість name зі значенням 'John', об'єкт бере значення з цієї властивості.
Коли програма виконується, person1.ageшукає у функції конструктора, чи є властивість з іменем age. Оскільки функція конструктора не має ageвластивостей, програма розглядає об'єкт-прототип функції конструктора, і об'єкт успадковує властивість від об'єкта-прототипу (якщо він доступний).
Примітка : Ви також можете отримати доступ до властивості прототипу функції конструктора з об'єкта.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
У наведеному вище прикладі personоб'єкт використовується для доступу до властивості прототипу за допомогою __proto__. Однак __proto__його було припинено, і вам слід уникати його використання.
