Разбиране на конструкторите в JavaScript

JavaScript е утвърден език, но добави само поддръжка за класическо обектно-ориентирано програмиране (OOP) в ES6. Докато не добави функции като декларации на класове, JavaScript обработваше OOP, използвайки по-малко известна парадигма, базирана на прототип. И с двата подхода обаче можете да създавате сложни приложения, които използват обектно-базирани функции.

Конструкторът в прототипния JavaScript изглежда много като всяка друга функция. Основната разлика е, че можете да използвате тази конструкторска функция за създаване на обекти.

Какво е конструктор в JavaScript?

Конструкторите са едни от основните понятия в обектно-ориентираното програмиране. Конструкторът е функция, която можете да използвате, за да създадете екземпляр на обект. Освен че създава нов обект, конструкторът определя свойствата и поведението, които ще му принадлежат.

Синтаксис на конструктора

функцияNameOfConstructor() {
 this.property1 = "Имот1";
 this.property2 = "Имот2";
 this.property3 = "Имот3";
}

Можете да създадете конструктор с

1. За да ги разграничите от другите функции, използвайте име за вашия конструктор, което започва с главна буква.
2. Конструкторите използват това ключова дума по различен начин. Вътре в конструктор, това се отнася до новия обект, който конструкторът ще създаде.
3. За разлика от функциите на JavaScript, конструкторите дефинират свойства и поведение, вместо да връщат стойности.

Използване на конструктор за създаване на нови обекти

В JavaScript използването на конструктор за създаване на обект е лесна задача. Ето един прост конструктор с извикване след него:

функцияСтудент() {
 това.име = "Глория";
 this.gender = "Женски пол";
това.възраст = 19;
}
позволявам студентка = нов Студент();

В този пример, студентка е обект, създаден от Студент конструктор. Използвай нов ключова дума за извикване на функцията като конструктор. Тази ключова дума казва на JavaScript да създаде нов екземпляр на Студент. Не трябва да извиквате тази функция без нов ключова дума, защото това вътре в конструктора няма да сочи към нов обект. След изграждането, студентка има всички свойства на Студент. Можете да осъществявате достъп и да променяте тези свойства точно както бихте направили с всеки друг обект.

Важни неща, които трябва да знаете за JavaScript конструкторите

Работата с конструктори може да бъде толкова уморителна, но в същото време може да бъде лесна задача. Ето някои важни неща, които всеки разработчик трябва да знае за работата с конструктори.

Използване на конструктори с аргументи

Можете да разширите конструктор, за да получавате аргументи. Това е много важно, ако искате да пишете отзивчив, гъвкав код.

Всеки път, когато създавате обект от конструктор, обектът ще наследи всички свойства, декларирани в конструктора. Например, на студентка които сте създали по-горе, ще има свойства име, пол, и възраст с фиксирани начални стойности. Въпреки че можете да промените всяко свойство ръчно, би било много работа, ако пишете програма, използваща много обекти.

За щастие конструкторите на JavaScript могат да приемат параметри, както всяка друга функция. Можете да промените Студент конструктор за приемане на два параметъра:

функцияСтудент(име, пол) {
това.name = име;
това.gender = пол;
това.възраст = 19;
}

Вече можете да дефинирате уникални обекти от един и същи конструктор, като подавате различни аргументи.

Аргументите правят конструкторите по-гъвкави. Те спестяват време и насърчават чист код.

Дефиниране на обектни методи

Методът е свойство на обект, което е функция. Методите подобряват вашия код в OOP, тъй като добавят различни поведения към вашите обекти. Ето един пример:

функцияСтудент(име, пол) {
това.name = име;
това.gender = пол;
това.възраст = 19 ;
това.sayName = функция () {
връщане`Казвам се ${име}`; 
 }
}

Горното добавя функцията кажиИме към конструктора.

Да предположим, че използвате този конструктор, за да създадете обект, който съхранявате в променлива, студентка. След това можете да извикате тази функция с кода по-долу:

студентка.sayName()

Прототипът

По-рано създадохме Студент по начин, по който всички негови екземпляри ще имат възраст имот на стойност от 19. Това ще доведе до дублиране на променлива за всеки Студент създаден от вас екземпляр.

За да избегне това дублиране, JavaScript използва концепцията за прототипи. Всички обекти, създадени от конструктор, споделят свойствата на неговия прототип. Можете да добавите възраст собственост към Студент прототип, както е показано по-долу:

Student.prototype.age = 19;

Правейки това, всички случаи на Студент ще има възраст Имот. Деклариране прототипни свойства е начин за намаляване на дублирания код във вашето приложение. Това прави вашия код възможно най-стандартен.

Прототипно свойство може да бъде обект

Можете да добавите свойства на прототипа поотделно, както е обяснено по-горе. Но ако имате много свойства за добавяне, това може да е неудобно.

Като алтернатива можете да съдържате всички необходими свойства в нов обект. Като направите това, ще зададете всички свойства наведнъж. Например:

Student.prototype = {
 възраст: 19,
 раса: "Бяло",
 увреждане: "Нито един"
}

Student.prototype = { 
конструктор: Студент, 
 възраст: 19, 
 раса: "Бяло", 
 увреждане: "Нито един"
}

Супертипове и наследяване

Наследство е метод, който програмистите използват за намаляване на грешките в своите приложения. Това е начин да се придържате към Не се повтаряй (СУХО) принцип.

Да предположим, че имате два конструктора—Студент и Учител— които имат две подобни прототипни свойства.

Student.prototype = { 
конструктор: Студент,
кажиИме: функция () {
връщане`Казвам се ${име}`; 
 }
}
Teacher.prototype = { 
конструктор: Учител,
кажиИме: функция () {
връщане`Казвам се ${име}`;
 }
}

И двата конструктора дефинират кажиИме метод, идентично. За да избегнете това ненужно дублиране, можете да създадете a супертип.

функцияIndividualDetails(){};
IndividualDetails.prototype = { 
конструктор: Индивидуални детайли, 
кажиИме: функция () {
връщане`Казвам се ${име}`; 
 }
};

След това можете да премахнете кажиИме и от двата конструктора.

За да наследите свойствата от супертипа, използвайте Object.create(). Задавате прототипа на двата конструктора на екземпляр на супертипа. В този случай задаваме Студент и Учител прототипи към екземпляр на IndividualDetails.

Ето го:

Student.prototype = Обект.create (IndividualDetails.prototype);
Учител.прототип = Обект.create (IndividualDetails.prototype);

По този начин, Студент и Учител наследяват всички свойства на супертипа, IndividualDetails.

Ето как да практикувате DRY в OOP, като използвате супертипове.

Конструкторите променят играта

Конструкторите са ключов компонент на JavaScript и овладяването на тяхната функционалност е от решаващо значение за разработването на OOP JavaScript приложения. Можете да използвате конструктор, за да създавате обекти, които споделят свойства и методи. Можете също да използвате наследяване, за да дефинирате йерархии на обекти.

В ES6 можете да използвате клас ключова дума за дефиниране на класически обектно-ориентирани класове. Тази версия на JavaScript също поддържа a конструктор ключова дума.