Классы JavaScript в ES6
Классы в JavaScript имеют уникальные функции, которые охватывают динамическую природу JavaScript. В этой статье мы познакомимся с классами в JavaScript вообще и тем, как создавать классы в ES6.
Классы в JavaScript до ES6
До ES6 в JavaScript не было классов. Чтобы имитировать класс, мы часто использовали и продолжаем использовать функцию-конструктор, как показано в примере ниже.
function SAnimal(type) {
this.type = type;
}
SAnimal.prototype.who = function() {
console.log(this.type);
}
var cat = new SAnimal('Кошка');
cat.who(); // Кошка
Как эта штука работает?
- Во-первых, мы создали тип SAnimal как функцию-конструктор, у которой есть свойство type. Метод who() присваивается прототипу, чтобы он мог использоваться всеми экземплярами типа SAnimal.
- Затем мы создали новый экземпляр типа SAnimal с использованием оператора new. Объект cat, следовательно, является экземпляром класса SAnimal и Object через прототипное наследование.
Современное объявление класса JavaScript
ES6 представил новый синтаксис для создания класса, как показано далее.
class SAnimal {
constructor(type) {
this.type = type;
}
who() {
console.log(type);
}
}
let cat = new SAnimal('Кошка');
cat.who();
Этот класс SAnimal ведет себя также как и тип SAnimal в предыдущем примере. Однако вместо использования функции конструктора мы определяем конструктор внутри класса.constructor() - это метод, в котором вы можете инициализировать необходимые свойства экземпляра. Метод who() - это метод класса SAnimal. Обратите внимание, что нам не нужно использовать ключевое слово function для объявления методов класса.
Объявление класса в JavaScript - это просто синтаксический сахар для функции-конструктора, поэтому результатом применения оператора typeof к классу SAnimal является функция.
console.log(typeof SAnimal); // function
Кроме того, связь между методом who() и классом SAnimal такая же, как и отношение между методом who() и SAnimal.prototype в предыдущем примере.
Класс и обычный тип
Несмотря на сходство между классом и пользовательским типом, определенным с
помощью функции-конструктора, здесь есть некоторые важные отличия.
Во-первых, объявления классов не поднимаются (not hoisted), как объявления
функций. Например, если вы поместите следующий код до фактического объявления
класса SAnimal, вы получите ReferenceError.
let dog = new SAnimal('Собака'); // Uncaught ReferenceError: SAnimal is not defined
Во-вторых, весь код внутри класса выполняется в режиме "strict mode"
автоматически, и вы не можете изменить это поведение.
В-третьих, методы класса не перечислимы. Напротив, если вы используете
функцию конструктора, вам нужно использовать метод Object.defineProperty(),
чтобы сделать свойство неперечислимым.
В-четвертых, вызов конструктора класса без оператора new приведет к ошибке,
как показано в следующем примере.
let duck = SAnimal('Утка');
// Непойманное исключение TypeError: Конструктор класса SAnimal не может быть вызван без оператора new
Анонимный класс в JavaScript ES6
Подобно функциям, классы также могут иметь форму выражений. Выражение класса не
требует идентификатора после ключевого слова class – анонимный класс. Вы
можете использовать выражения классов в объявлениях переменных и передавать их в
функцию в качестве аргумента.
Вот выражение класса, которое эквивалентно предыдущему примеру класса
SAnimal.
let SAnimal = class {
constructor(type) {
this.type = type;
}
identify() {
console.log(this.type);
}
}
let duck = new SAnimal('Утка');
console.log(duck instanceof SAnimal); // true
console.log(duck instanceof Object); // true
console.log(typeof SAnimal); // function
console.log(typeof SAnimal.prototype); // function
Подобно выражениям функций выражения класса не поднимаются, т.е. недоступны выше места своего первоначального объявления.
Объекты первого класса
Класс JavaScript является объектом первого класса. Это означает, что вы можете передать класс в функцию, вернуть его из функции и присвоить его переменной.
function factory(сlazz) {
return new clazz();
}
let greeting = factory(class {
sayHello() {
console.log(' Здравствуй');
}
});
greeting.sayHello(); // 'Здравствуй'
В этом примере функция factory() принимает выражение анонимного класса в качестве аргумента. Она создает экземпляр этого класса и возвращает его.
На этом все, а в следующей статье мы продолжим обсуждение использования классов в JavaScript ES6.
-
Создано 05.06.2018 08:20:18
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.