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

Най-важни изводи

  • Новата синтаксис на класове позволява по-ясна и по-компактна форма на дефиниция.
  • Използването на конструктори е по-лесно и не изисква отделни прототипи.
  • Функционалността зад синтаксиса на класовете остава базирана на прототипи.

Инструкция стъпка по стъпка

1. Разбиране на стария начин на писане

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

Класове в JavaScript: Синтактичната революция

Ако искаш да създадеш нов обект, това става с new Shape(1, 100, 200). След това обектът shape може да бъде използван за извличане на свойствата.

2. Показване на стойностите

За да се уверим, че нашият обект е инстанциран правилно, показваме свойствата x и y.

Класове в JavaScript: Синтактичната революция

3. Въвеждане на новия синтаксис на класове

Сега преминаваме към новия синтаксис на класове, който е наличен от ES6.

Промените са очевидни: не ти трябва отделен прототип. Вместо това дефинираш всички методи в самия клас.

4. Създаване на обекти с новия клас

Създаването на обект с новия синтаксис става по същия начин, както преди. Използваш new, за да създадеш инстанция на класа Shape.

5. Използване на новия клас

Използването на ново дефинирания клас е идентично на стария метод. Можеш да използваш инстанцията shape1, за да вземеш стойностите и да използваш метода move.

6. Наследяване в класове

Още едно предимство на синтаксиса на класове е възможността за наследяване. Ако искаш да създадеш нов клас, който наследява от съществуващ клас, можеш да използваш ключовата дума extends.

При това конструкторът на детския клас super() извиква конструктора на родителския клас. Това ти позволява да използваш свойствата на Shape и в същото време да дефинираш уникални свойства за Rectangle.

7. Заключение относно декларацията на клас

Синтаксисът на класове не само прави твоят код по-прегледен, но също така позволява по-ясна структура при работа с обектно-ориентирани концепции. Можеш не само да създаваш класове, но и да изграждаш сложни йерархии на наследяване, което прави кода ти по-гъвкав и лесен за поддръжка.

Резюме - Новата синтаксис на класове в JavaScript: ES6 до ES13

В това ръководство научи как да използваш новата синтаксис на класове в JavaScript от ES6 до ES13 ефективно. Старият метод за създаване на класове често беше тромав и податлив на грешки, докато новият синтаксис предлага ясна и проста структура. Освен това научи основите на наследяването чрез синтаксиса extends, за да разшириш своите класове.

Често задавани въпроси

Каква е разликата между стария и новия синтаксис на класове?Старият метод използва конструкторски функции и прототипи, докато новият синтаксис опростява дефиницията и използването на класове.

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

Как работи наследяването със синтаксиса на класове?Твоята клас може да наследява функционалности от друга клас чрез ключовата дума extends, като извикаш конструктора на родителската клас с super().