Классы JavaScript в ES6

В этом руководстве вы узнаете о классах в 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 — это синтаксический сахар по сравнению с прототипным наследованием с дополнительными улучшениями.