Классы JavaScript в ES6. Часть 2
Эта статья является продолжением предыдущей статьи. В заключительной части последней мы говорили об использовании анонимных классов в JavaScript, и в этой статье мы продолжим обсуждать данную тему.
Вы можете использовать выражение класса для немедленного создания экземпляра класса, вызвав конструктор класса немедленно. Для этого используется оператор new с ключевым словом class, и в конце блока анонимного класса, сразу после закрывающей фигурной скобки ставятся круглые скобки, в которые при необходимости передаются аргументы для конструктора класса:
let app = new class
constructor(name)
this.name = name;
}
start() {
console.log(`Запуск приложения ${this.name}...`);
}
}('TodoList');
app.start(); // Запуск приложения TodoList…
В этом примере мы создаем анонимный класс и выполняем его немедленно.
Геттеры и сеттеры
Чтобы создать getter и setter методы , нужно использовать ключевые слова get и set, за которыми следуют пробел и идентификатор.
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(str) {
let names = str.split(' ');
if (names.length === 2) {
this.firstName = names[0];
this.lastName = names[1];
} else {
throw 'Неправильный формат имени';
}
}
}
let mary = new Person('Мария', 'Дорош');
console.log(mary.fullName); // Мария Дорош
// устанавливаем новое имя
mary.fullName = 'Мэри Уильям';
console.log(mary.fullName); // Мэри Уильям
Вызов метода fullName возвращает полное имя объекта person, объединяя имя и фамилию через пробел.
Метод setName принимает строку в качестве аргумента. Он разбивает строку на
части и присваивает свойства firstName и lastName соответствующим
свойствам класса. Если входной аргумент в неправильном формате, то есть имя,
пробел и фамилия не присутствуют во входной строке, данный метод вызывает ошибку.
Вычисляемые имена свойств
Как и в литерале объекта, вы можете использовать вычисляемые имена свойств, для имен методов класса. Следующий класс Person эквивалентен классу Person в предыдущем примере, за исключением того, что он использует переменную name, которая содержит имя метода в качестве вычисляемого имени.
let name = 'fullName';
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get[name] {
return this.firstName + ' ' + this.lastName;
}
set[name](str) {
//...
}
}
var john = new Person('John', 'Doe');
console.log(john.fullName); // John Doe
Статические методы
До ES6, чтобы создать статический метод, необходимо было добавить метод непосредственно к функции-конструктору. Например, в примере далее добавляется статический метод к типу Animal, определенному в предыдущем примере.
Animal.make = function(type) {
return new Animal(type);
}
var dog = Animal.make('Собака');
dog.identify(); // Собака
Метод make() считается статическим методом, поскольку он не зависит от какого-либо экземпляра класса Animal. ES6 упростил задачу создания статических, используя ключевое слово static для метода , как показано в следующем примере.
class Animal {
constructor(type) {
this.type = type;
}
identify() {
console.log(this.type);
}
static create(type) {
return new Animal(type);
}
}
var mouse = Animal.create('Мышь');
mouse.identify(); // Мышь
Обратите внимание, что попытка получить доступ к статическому методу из экземпляра класса приводит к ошибке.
mouse.create('Обезьянка'); // Ошибка TypeError: mouse.create не является функцией
Таким образом, теперь вы знаете, как использовать классы в JavaScript ES6 и как применять их для разработки пользовательских типов в приложениях.
-
Создано 07.06.2018 08:35:32
-
Михаил Русаков
Комментарии (1):
всем привет
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.