Классы ES6

Автор оригинала: Scott Robinson.

Вступление

Нет сомнений в том, что популярность JavaScript вырос за последние несколько лет, и это быстро становится языком выбора для не только кода клиента, но и сторона серверов. Я никогда не был огромным поклонником JavaScript, это казалось слишком грязным и излишне запутанным. Хотя я все еще верю, что некоторые из этого, чтобы быть правдой, большая часть этого было просто недоразумением языка и непереносимости отсутствия определенных функций/синтаксиса (т. Е. Традиционные классы).

С выпуском ES6 JavaScript, кажется, больше продвигается на язык, который я лично хочу, чтобы это было, при этом добавление классов традиционных стилей, генераторы, итераторы, встроенные обещания и многие другие функции. Лично я считаю, что это облегчит переход для разработчиков, поступающих с других языков, таких как Java (например, я сделал), Python и C ++. Обучение JavaScript открывает гораздо больше возможностей для разработчиков, что позволяет им написать код только для любой платформы, которую вы хотите (боковая сторона браузера, сервера Via Узел / i.js , мобильные приложения через реагировать на родных и даже настольных компьютеров).

Следите за новыми функциями ES6 и ES7, они все там по причинам и решают некоторые большие проблемы для разработчиков, таких как дело с обратным вызовом ад.

В этой статье я буду проходить функции и предостережения классов ES6.

Классы ES6

Итак, давайте направимся к этому. Вот голые необходимые основы для создания класса ES6:

class Animal {}

var a = new Animal();

Это делает именно то, что похоже, он определяет пустой класс без свойств или методов. Существует несколько разных способов определить класс ES6, при этом вышеупомянутый синтаксис является одним из них. Вы также можете определить анонимные или неназванные классы, такие как:

var Animal = class {
    constructor(name) {
        this.name = name;
    }
};

Это эквивалентно анонимным классам в Java, где вы определяете и осознаете класс одновременно.

Отсюда мы можем добавить свойства. Чтобы сделать это, мы должны определить их внутри конструктора, в отличие от его, как Java требует.

class Animal {
	constructor() {
		this._name = 'cow';
	}
}

var a = new Animal();
console.log(a._name);	// Prints 'cow'

Чтобы получить доступ или изменить эти данные, мы можем определить методы Getter и Setter:

class Animal {
	constructor(n) {
		this._name = n;
	}

	get name() {
		return this._name;
	}

	set name(n) {
		this._name = n;
	}
}

var a = new Animal('cow');
console.log(a.name);	// Prints 'cow'
a.name = 'cat'
console.log(a.name);	// Prints 'cat'

Как и во многих других языках, мы можем использовать как статические, так и экземпляры для доступа или манипулирования данных класса:

class Animal {
	constructor(n) {
		this._name = n;
	}

	get name() {
		return this._name;
	}

	set name(n) {
		this._name = n;
	}

	fullName() {
		return 'holy ' + this._name;
	}

	static className() {
		return 'Animal';
	}
}

var a = new Animal('cow');
console.log(Animal.className());	// Prints 'Animal'
console.log(a.fullName());			// Prints 'holy cow'

Для разработчиков Java и C # это должно выглядеть знакомым. У нас есть традиционные методы и статические методы, как и на многих других языках.

До сих пор функция, которые я показал, не добавляю слишком много, чтобы JavaScript мы не сможем сделать раньше раньше. Настоящая полезность классов ES6 реализована, когда мы используем наследство с расширяется ключевое слово. Эта функциональность была доступна раньше, но вам пришлось иметь дело с Прототип и использовать Util.anherits , который чувствовал себя немного неловко и не был очень понятен для новичков JS разработчиков. Теперь мы можем сделать что-то вроде этого:

class Dog extends Animal {
	constructor() {
		super('dog');
	}

	fullName() {
		return 'snoop ' + this._name;
	}

	static className() {
		return 'Dog';
	}
}

var d = new Dog();
console.log(Dog.className());	// Prints 'Dog'
console.log(d.fullName());		// Prints 'snoop dog'

Этот синтаксис и поведение должны быть понятными и достаточно интуитивно понятными для большинства разработчиков, чтобы погрузиться вправо. Кроме того, он также должен сделать обучение JS намного проще для большего количества начинающих программистов.

Одно предупреждение о том, чтобы следить за «поднятием». Подъемник – это поведение JavaScript по умолчанию для движущихся деклараций к вершине. Разница между декларациями класса и декларациями функций заключается в том, что функции являются подниматься И классы нет. Это означает, что для использования класса необходимо определить до вы используете его.

var a = new Animal();    // ReferenceError!
class Animal {}

Функции, с другой стороны, можно использовать, прежде чем они определены.

Заключение

Хотя большая часть этой функциональности всегда была доступна, я считаю, что это огромный шаг в создании JS более удобных для пользователя. Синтаксис и простота использования является огромным фактором в усыновлении языка, так что это, скорее всего, продвигает JS еще больше популярности.

Что вы думаете о новых классах ES6? Дайте нам знать, что вы думаете в комментариях!