JavaScript ES6: Классы | ReactJS

Итак, выше вы уже достаточно насмотрелись примеров конструкторов, свойств и методов, которыми мы пользовались до выхода в свет нового стандарта. Не буду вас больше томить ожиданием и сразу перейдём к коду:

Онлайн курс по React JS в Харькове

class Person {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`Person ${this.name} said his name`);
  }
}

const john = new Person('John');
john.sayName(); // Person John said his name

Пример выше можно записать в стиле ES5 следующим образом:

var Person = function(name) {
  this.name = name;
};

Person.prototype.sayName = function() {
  console.log('Person ' + this.name + ' said his name');
};

var john = new Person('John');
john.sayName(); // Person John said his name

Что нужно знать про классы:

• Создавая класс, вы пользуетесь блоком кода (всё, что находится между{и}), внутри которого объявляете, всё, что хотите видеть в прототипе.
• Записьclass Personозначает, что будет создана функция конструкторPerson(всё точно так же, как и в ES5)
• Свойствоconstructorиспользуется для обозначение того, что будет происходить непосредственно в самом конструкторе.
• Все методы для класса используют краткую запись, которую мыобсуждали ранеев статье про расширение литерала объектов.
• При перечислении методов не надо использовать запятые (на самом деле, они запрещены)

Важно понимать, что мы до сих пор работаем с обычными функциями. То есть если вы захотите проверить тип класса, то (с удивлением?) обнаружитеfunction:

typeof Person === 'function'; // true

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

const Person = class P { /* делаем свои дела */ }
const obj = {
  Person
};

Но, как и во всех остальных вопросах в JavaScript, здесь есть свои подводные камни. Во-первых функцияPersonобязана быть вызвана с операторомnewи, во-вторых, в то время, как функцияfunction Person(name) { this.name = name; }поднималась наверх (стандартный hoisting) и её можно было использовать в любой части кода, конструктор, созданный с помощьюclassне испытывает на себе поднятия.

Онлайн курс по React JS в Харькове | Frontend, обучение, уроки, ментор - ReactWarriors