В этом руководстве вы узнаете о классах в JavaScript и о том, как их эффективно использовать в ES6.
Класс JavaScript — это схема для создания объектов. Класс инкапсулирует данные и функции, которые манипулируют данными.
В отличие от других языков программирования, таких как Java и C#, классы JavaScript — это синтаксический сахар, а не наследование прототипов. Другими словами, классы ES6 — это просто специальные функции.
Пересмотр классов до ES6
До ES6 в JavaScript не было концепций классов. Чтобы имитировать класс, часто используется шаблон конструктор/прототип, как показано в следующем примере:
function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; }; var john = new Person("John Doe"); console.log(john.getName());
Выход:
John Doe
Как это работает:
- Во-первых, создайте
Person
как функцию-конструктор с именем свойстваname
. ФункцияgetName()
присваиваетсяprototype
, чтобы ее могли использовать все экземпляры типаPerson
. - Затем создайте новый экземпляр типа
Person
с помощью оператораnew
. Таким образом, объектjohn
является экземпляромPerson
иObject
посредством прототипного наследования.
Следующие операторы используют оператор instanceof
для проверки, является ли john
экземпляром типа Person
и Object
:
console.log(john instanceof Person); // true console.log(john instanceof Object); // true
Объявление класса
ES6 представил новый синтаксис для объявления класса, как показано в этом примере:
class Person { constructor(name) { this.name = name; } getName() { return this.name; } }
Этот класс Person
ведет себя как тип Person
в предыдущем примере. Однако вместо использования шаблона конструктора/прототипа используется ключевое слово class
.
В классе Person
в constructor()
вы можете инициализировать свойства экземпляра. JavaScript автоматически вызывает метод constructor()
, когда вы создаете экземпляр объекта класса.
Следующее создает новый объект Person
, который автоматически вызывает constructor()
класса Person
:
let john = new Person("John Doe");
getName()
называется методом класса Person
. Подобно функции-конструктору, вы можете вызывать методы класса, используя следующий синтаксис:
objectName.methodName(args)
Пример:
let name = john.getName(); console.log(name); // "John Doe"
Чтобы убедиться в том, что классы являются специальными функциями, вы можете использовать оператор typeof
для проверки типа класса Person
.
console.log(typeof Person); // function
Он возвращает function
, как и ожидалось.
Объект john
также является экземпляром типов Person
и Object
:
console.log(john instanceof Person); // true console.log(john instanceof Object); // true
Класс или пользовательский тип?
Несмотря на сходство между классом и пользовательским типом, определенным через функцию-конструктор, есть некоторые важные различия.
Во-первых, объявления классов не поднимаются, как объявления функций.
Например, если вы поместите следующий код над разделом объявления класса Person
, вы получите ReferenceError
.
let john = new Person("John Doe");
Ошибка:
Uncaught ReferenceError: Person is not defined
Во-вторых, весь код внутри класса автоматически выполняется в строгом режиме. И вы не можете изменить это поведение.
В-третьих, методы класса не являются перечисляемыми. Если вы используете шаблон конструктора/прототипа, вы должны использовать метод Object.defineProperty()
, чтобы сделать свойство неперечисляемым.
Наконец, вызов конструктора класса без оператора new
приведет к ошибке, как показано в следующем примере.
let john = Person("John Doe");
Ошибка:
Uncaught TypeError: Class constructor Person cannot be invoked without 'new'
Обратите внимание, что функцию-конструктор можно вызвать без оператора new
. В этом случае функция-конструктор ведет себя как обычная функция.
Заключение
- Ключевое слово
class
JavaScript объявляет новый класс. - Объявление
class
— это синтаксический сахар по сравнению с прототипным наследованием с дополнительными улучшениями.