Научете как да създавате класове в JavaScript

През 2015 г. бе пусната ES6 версията на езика за програмиране на JavaScript. Това издание въведе някои големи подобрения на езика и официално го постави в категорията на обектно-ориентирания език за програмиране сред други езици като Java и C ++.

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

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

В тази статия ще научите как да създавате и манипулирате обекти с помощта на JavaScript класове.

Структура на JavaScript клас

Когато създавате клас в JavaScript, има един основен компонент, който винаги ще ви е необходим - клас ключова дума. Почти всеки друг аспект на класа JavaScript не е необходим за успешното му изпълнение.

JavaScript клас ще се изпълни естествено, ако не е предоставен конструктор (класът просто ще създаде празен конструктор по време на изпълнение). Ако обаче е създаден JavaScript клас с конструктори и други функции, но не се използва ключова дума за клас, този клас няма да бъде изпълним.

The клас ключовата дума (която винаги трябва да е с малки букви) е необходимост в класовата структура на JavaScript. Следващият пример е общият синтаксис на JavaScript клас. Синтаксисът на JavaScript клас е по -долу:

class ClassName {
// тяло на класа
}

Създаване на клас в JavaScript

В програмирането един клас може да се разглежда като обобщен обект, който се използва за създаване на специализиран обект. Например, в училищна среда, обобщена единица (клас) може да бъде ученици, а обект на ученици може да бъде Джон Браун. Но преди да създадете обект, ще трябва да знаете данните, които той ще съхранява и тук влизат в действие конструкторите на JavaScript.

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

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

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

По -долу ще видите пример на конструктор с обяснение какво означава това.

ученик от клас {
конструктор (firstName, lastName, startDate) {
this.firstName = първо име;
this.lastName = lastName;
this.startDate = startDate;
}
}

Горният код представя важен аспект на конструктора на JavaScript клас; за разлика от други езици като Java и C ++, конструкторът на JavaScript не използва името на класа за създаване на конструктор. Той използва конструктор ключова дума, както можете да видите в горния пример.

Свързани: Научете как да създавате класове в Java

The конструктор в горния пример взема три параметъра и използва това ключова дума за присвояване на параметрите на текущия екземпляр на класа. Може да изглежда малко объркващо, но това, което трябва да разберете, е, че класът може да се разглежда като план, който се използва за създаване на много къщи.

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

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

Създаване на обект в JavaScript

Конструкторите са важни в език като JavaScript, защото означават броя на атрибутите, които трябва да има обект от конкретен клас. Някои езици ще изискват декларирането на атрибут (променлива), преди да може да се използва в конструктор или други методи. Това обаче не е така с JavaScript.

Свързани: Как да декларирате променливи в JavaScript

Разглеждайки конструктора на студентския клас по -горе, можете да различите, че обект от този клас ще има три атрибута.

Пример за създаване на обект

По -долу ще видите пример за създаване на обект в JavaScript.

// създаване на нов обект
const john = нов ученик („Джон“, „Браун“, „2018“);

Кодът по -горе използва Студент клас за създаване на обект.

Когато създавате обект от клас, трябва да използвате нов ключова дума, последвано от името на класа и стойностите, които искате да присвоите на съответните атрибути. Сега имате нов студент с името Джон, фамилията Браун и начална дата на 2018 г. Имате и постоянна променлива: Джон. Тази променлива е важна, защото ви позволява да използвате създадения обект.

Без Джон променлива, все още ще можете да създадете нов обект с помощта на Студент class, но тогава няма да има начин за достъп до този обект и използването му с различните методи на класа.

Използване на методи в JavaScript класове

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

Пример за създаване на методи на класа

По -долу е даден пример за създаване на методи на класа в JavaScript.

ученик от клас {
конструктор (firstName, lastName, startDate) {
this.firstName = първо име;
this.lastName = lastName;
this.startDate = startDate;
}
// метод на отчет
report () {
return `$ {this.firstName} $ {this.lastName} започна да посещава тази институция в $ {this.startDate}`
}
}

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

Благодарение на „създайте пример за обект“ по -горе, трябва да имате обект на Студент клас, който е присвоен на променливата Джон. Използвайки Джон, вече можете успешно да се обадите на доклад () метод.

Пример за използване на методи на класа

По -долу е даден пример за използване на класови методи в JavaScript.

// създаване на нов обект
const john = нов ученик („Джон“, „Браун“, „2018“);
// извикваме метода на отчета и съхраняваме резултата му в променлива
нека резултат = john.report ();
// отпечатване на резултата в конзолата
console.log (резултат);

Кодът по -горе използва Студенти клас, за да произведе следния изход в конзолата:

Джон Браун започна да посещава тази институция през 2018 г.

Използване на статични методи в JavaScript класове

Статичните методи са уникални, защото са единствените методи в JavaScript клас, които могат да се използват без обект.

От горния пример не можете да използвате доклад () метод без обект на класа. Това е така, защото доклад () метод разчита на атрибутите на обект, за да произведе желания резултат. Въпреки това, за да използвате статичен метод, ще ви трябва само името на класа, който съхранява метода.

Пример за създаване на статичен метод

По -долу е даден пример за статичен метод за JavaScript.

ученик от клас {
конструктор (firstName, lastName, startDate) {
this.firstName = първо име;
this.lastName = lastName;
this.startDate = startDate;
}
// метод на отчет
report () {
return `$ {this.firstName} $ {this.lastName} започна да посещава тази институция в $ {this.startDate}`
}
// статичен метод
static endDate (startDate) {
връщане startDate + 4;
}
}

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

Пример за използване на статичен метод

По -долу е даден пример за използване на статичен метод в JavaScript.

// извикване на статичен метод и отпечатване на неговия резултат в конзолата
console.log (Student.endDate (2018));

Редът с код по -горе използва Студенти клас, за да произведе следния изход в конзолата:

2022

Създаването на JavaScript клас е лесно

Има няколко неща, които трябва да запомните, ако искате да създадете JavaScript клас и да създадете един или повече обекти от него:

• JavaScript клас трябва да има клас ключова дума.
• Конструктор на JavaScript показва броя стойности, които обектът може да има.
• Методите от общ клас не могат да се използват без обект.
• Статичните методи могат да се използват без обект.

The конзола.log () метод се използва в цялата статия, за да предостави резултатите от използването на общите и статичните методи в клас JavaScript. Този метод е полезен инструмент за всеки разработчик на JavaScript, тъй като помага в процеса на отстраняване на грешки.

Запознаване с console.log () метод е едно от най -важните неща, които можете да направите като разработчик на JavaScript.

The Ultimate JavaScript Cheat Sheet

Вземете бързо опресняване на JavaScript елементи с този лист за манипулации.

Прочетете Напред

За автора