React ES6

Какво е ES6?

ES6 означава ECMAScript 6.

ECMAScript е създаден за стандартизиране на JavaScript и ES6 е шестата версия на ECMAScript, публикувана е през 2015 г. и е известна още като ECMAScript 2015.


Защо трябва да науча ES6?

React използва ES6 и трябва да сте запознати с някои от новите функции като:

  • Класове
  • Функции на стрелките
  • Променливи (let, const, var)

Класове

ES6 представи класове.

Класът е тип функция, но вместо да използваме ключовата дума, за function да я инициираме, ние използваме ключовата дума class и свойствата се присвояват вътре в constructor() метода.

Пример

Прост конструктор на клас:

Сега можете да създавате обекти, като използвате класа Car:

Пример

Създайте обект, наречен „mycar“ въз основа на класа Car:

Опитайте сами »

Забележка: Функцията конструктор се извиква автоматично, когато обектът се инициализира.

Метод в класове

Можете да добавите свои собствени методи в клас:

Пример

Създайте метод с име „present“:

Опитайте сами »

Както можете да видите в примера по-горе, извиквате метода, като се позовавате на името на метода на обекта, последвано от скоби (параметрите ще влизат в скобите).

Наследяване на класа

За да създадете наследяване на клас, използвайте extends ключовата дума.

Клас, създаден с наследство на клас, наследява всички методи от друг клас:

Пример

Създайте клас с име „Model“, който ще наследи методите от класа „Car“:

Опитайте сами »

super() метода се отнася до клас родител.

Чрез извикване на super() метода в метода на конструктора, ние извикваме метода на конструктора на родителя и получаваме достъп до свойствата и методите на родителя.


Функции на стрелките

Функциите със стрелки бяха въведени в ES6.

Функциите със стрелки ни позволяват да пишем с по-кратък синтаксис на функцията:

Преди:

Опитайте сами »

С функция стрелка:

Опитайте сами »

Така е по-кратко! Ако функцията има само една декларация, и изявлението връща стойност, можете да премахнете къдравите скоби и на return ключова дума:

Функции със стрелки Връщаща стойност по подразбиране:

Опитайте сами »

Забележка: Това работи само ако функцията има само един оператор.

Ако имате параметри, ги предавате в скобите:

Функция със стрелка с параметри:

Опитайте сами »

Всъщност, ако имате само един параметър, можете да пропуснете и скобите:

Функция на стрелка без скоби:

Опитайте сами »

За this?

Обработката на this също е различна при функциите със стрелки в сравнение с обикновените функции.

Накратко, при функциите със стрелки няма обвързване на this.

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

При функциите със стрелки this ключовата дума винаги представлява обекта, дефинирал функцията на стрелката.

Нека да разгледаме два примера, за да разберем разликата.

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

Първият пример използва обикновена функция, а вторият пример използва функция стрелка.

Резултатът показва, че първият пример връща два различни обекта (прозорец и бутон), а вторият пример връща обекта Header два пъти.

Пример

С обикновена функция this представлява обекта, който е извикал функцията:

Опитайте сами »

Пример

С функция стрелка, this представлява обекта Header, без значение кой е извикал функцията:

Опитайте сами »

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


Променливи

Преди ES6 имаше само един начин за определяне на променливи: с var ключовата дума. Ако не сте ги дефинирали, те ще бъдат присвоени към глобалния обект. Освен ако не сте били в strict режим, тогава ще получите грешка, ако вашите променливи не са дефинирани.

Сега, с ES6, има три начина за определяне на променливите си: varlet, и const.

var

Ако използвате var извън функция, тя принадлежи към глобалния обхват.

Ако използвате var във вътрешността на функция, тя принадлежи към същата тази функция.

Ако използвате var вътре в блок, т.е. цикъл for, променливата все още е достъпна извън този блок.

var има обхват на функция , а не обхват на блок .

let

let има обхват за блока.

let е версията на блока с обхват var и е ограничена до блока (или израза), където е дефинирана.

Ако използвате let вътре в блок, т.е. цикъл for, променливата е достъпна само вътре в този цикъл.

const

const е променлива, която след като бъде създадена, нейната стойност никога не може да се промени.

const има обхват за блока.