Как использовать классы JavaScript

В 2015 году в стандарте ECMAScript 6 (ES6) были введены классы. Узнай о них все

В 2015 году в стандарте ECMAScript 6 (ES6) были введены классы.

В JavaScript есть довольно необычный способ реализации наследования: прототипное наследование.Прототипное наследование, хотя, на мой взгляд, это здорово, в отличие от большинства других популярных языков программирования реализация наследования, основанная на классах.

Людям, пришедшим из Java, Python или других языков, было трудно понять тонкости прототипного наследования, поэтому комитет ECMAScript решил посыпать синтаксический сахар поверх прототипного наследования, чтобы оно напоминало то, как наследование на основе классов работает в других популярных реализациях.

Это важно: внутренний JavaScript остается прежним, и вы можете получить доступ к прототипу объекта обычным способом.

Определение класса

Так выглядит класс.

class Person {
  constructor(name) {
    this.name = name
  }
hello() {
return 'Hello, I am ’ + this.name + ‘.’
}
}

У класса есть идентификатор, который мы можем использовать для создания новых объектов, используяnew ClassIdentifier().

Когда объект инициализируется,constructorвызывается метод с любыми переданными параметрами.

У класса также есть столько методов, сколько ему нужно. В этом случаеhelloявляется методом и может вызываться для всех объектов, производных от этого класса:

const flavio = new Person('Flavio')
flavio.hello()

Наследование классов

Класс может расширять другой класс, и объекты, инициализированные с помощью этого класса, наследуют все методы обоих классов.

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

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.'
  }
}
const flavio = new Programmer(‘Flavio’)
flavio.hello()

(вышеприведенная программа печатает «Привет, я Флавио. Я программист.”)

Классы не имеют явных объявлений переменных класса, но вы должны инициализировать любую переменную в конструкторе.

Внутри класса вы можете ссылаться на вызов родительского классаsuper().

Статические методы

Обычно методы определяются в экземпляре, а не в классе.

Вместо этого в классе выполняются статические методы:

class Person {
  static genericHello() {
    return 'Hello'
  }
}
Person.genericHello() //Hello

Частные методы

В JavaScript нет встроенного способа определения частных или защищенных методов.

Есть обходные пути, но я не буду их здесь описывать.

Геттеры и сеттеры

Вы можете добавлять методы с префиксомgetили жеsetчтобы создать геттер и сеттер, которые представляют собой два разных фрагмента кода, которые выполняются в зависимости от того, что вы делаете: доступ к переменной или изменение ее значения.

class Person {
  constructor(name) {
    this._name = name
  }
set name(value) {
this._name = value
}
get name() {
return this._name
}
}

Если у вас есть только метод получения, свойство не может быть установлено, и любая попытка сделать это (за пределами конструктора, который устанавливает значение при инициализации нового объекта этим классом) будет проигнорирована:

class Person {
  constructor(name) {
    this._name = name
  }
get name() {
return this._name
}
}

Если у вас есть только сеттер, вы можете изменить значение, но не получить к нему доступ извне:

class Person {
  constructor(name) {
    this._name = name
  }
set name(value) {
this._name = value
}
}

Геттеры и сеттеры очень полезны, когда вы хотите выполнить некоторый код при изменении значения свойства или если вы хотите создать «вычисляемое» свойство. Вы можете изменить возвращаемые значения с помощью геттера.

Вы также можете запустить некоторый код, например, вести журнал в консоли или в файле при изменении значения.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript