Классы и наследование в ES6

В ES6 - есть классы, поэтому ключевым словом class определяем класс. В классе имеется специальная метод, который называется конструктор - constructor(). В нём также создаётся пустой объект, ссылкой на который является слово this. Далее с помощью this присваиваем свойства и в конце возвращаем.

class Task{
    constructor(title = 'Задача'){
        this._title = title;
        this._done = false;
        Task.count += 1;
    }
}

В ES6 свойства указываются через простые get и set методы

get title () {
	return this._title;
}
set title(value) {
	this._title = value;
}

Методы - в ES6 происходит то же самое что и в ES5, просто от нас это скрыто. И всё что нам нужно сделать - это объявить метод у класса.

complete () {
	this._done = true;
}

В ES6 - объявление статических  методов предельно упрощено. Всё что нужно сделать - это указать слово static перед именем метода.

static getDefaultTitle(){
	return 'Задача';
}

Статические свойства объявляются на самом классе за пределами класса.

Task.count = 0;

Наследовани в ES6 используется ключевое слово super - вызывающее родительский конструктор, который возвращает объект, которому мы дополнительно присваиваем свойство parent. В ES6 для того чтобы указать наследование - используется ключевое слово extends.

class SubTask extends Task{
    constructor(title, parent){
        super(title);
        this._parent = parent;
    }
}

Итоговый класс

class Task{
    constructor(title = 'Задача'){
        this._title = title;
        this._done = false;
        Task.count += 1;
    }
    get title () {
		return this._title;
	}
	set title(value) {
		this._title = value;
    }
    complete () {
        this._done = true;
    }
    static getDefaultTitle(){
        return 'Задача';
    }
}

Task.count = 0;

class SubTask extends Task{
    constructor(title, parent){
        super(title);
        this._parent = parent;
    }
}

let task = new Task('Изучить JavaScript');
let subtask = new SubTask('Изучить ES6', task);

console.dir(task);
console.dir(subtask);

Особенности классов в ES6

  • В ES5 функции совершают хойстинг (подъём) - к началу контекста в котором они объявлены, поэтому можно использовать фунгкции до их объявления. В ES6 классы не поднимаются, т.е. нельяз использовать класс до его объявления.
  • Классы в не засоряют глобальное пространство имён