Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6
Code

Сила ECMAScript 6: Класс и Наследование

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called ECMAScript 6 Power Tutorial.
ECMAScript 6 Power Tutorial: Template Strings
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Я хочу познакомить вас с серией статей о ECMAScript6, поделиться с вами своей страстью к новой спецификации и объяснить, как ES6 может пригодиться вам.  Надеюсь вам понравится читать информацию изложенную в этих статьях, так же как мне нравилось её писать.

Для начала, Я работаю в Microsoft над движком для отображения элементов в Microsoft Edge, который является сильно улучшенным движком Internet Explorer, который мы знаем (и любим?) долгие годы.  Для меня самой главной особенностью данного движка, является поддержка многих нововведений ECMAScript 6. Мне кажется, что это огромный плюс при создании больших веб-приложений.

На данный момент 70% ECMAScript 6 работают в Microsoft Edge, согласно http://kangax.github.io/compat-table/es6/ и ES6 on dev.modern.ie/platform/status.

Table of ECMAScript 6 features on Microsoft Edge

Я люблю JavaScript, но работая над большими проектами, как Babylon.js, я предпочитаю TypeScript, который теперь используется в Angular 2, между прочим. Причина этому JavaScript (также известный, как ECMAScript 5) не обладает всеми особенностями синтаксиса, к которым я привык, создавая большие проекты на других языках. К примеру, мне сильно не хватает классов и наследования.

Итак, без дальнейших церемоний, давайте приступим:

1. Создание Класса

Объектная модель в JavaScript основана на прототипах, в ECMAScript 5 есть возможность симулировать классы и наследование.

Гибкость JavaScript функций позволяет нам симулировать инкапсуляцию, к которой мы привыкли, работая с классами.  Мы можем добиться этого с помощью хитрости - расширить прототип объекта:

Как вы можете заметить мы создали “класс” со “свойствами” и  “методами”.

Конструктором является сама функция (функция Animal) где мы можем создавать свойства. С помощью прототипа мы можем создать функции, которые будут считаться методами экземпляра.

Всё это работает, но для этого вы должны понимать прототипное наследование, и для тех кто работал до этого с привычными языками основанными на классах это может быть довольно запутанно. Забавно, что в JavaScript есть зарезервированное ключевое слово class, которое не используется. В ECMAScript 6 оно работает и позволяет писать более короткий код:

Результат будет одинаковый, но вариант выше легче писать и читать разработчикам более знакомым с классами. Нет необходимости в прототипе и вы можете использовать ключевое слово new для создания конструктора.

Кроме того, классы вводят новую семантику, которой не было в ECMAScript 5. К примеру вы не можете вызвать конструктор без new и вы не можете создавать методы с new. Также методы считаются non-enumerable.

Интересно следующие: Обе версии ничуть не мешают друг-другу.

В конце концов, даже с новым ключевым словом, это будет всё та же функция-прототип куда была добавлена другая функция.  “Метод” в данном случает просто свойство с функцией у вашего объекта.

Две другие важные особенности разработки основанной на классах, геттеры и сеттеры, также поддерживаются в ES6. Тем самым становится более очевидным, что метод делает:

Не правда-ли удобно?

Здесь мы можем заметить подводный камень JavaScript: “не совсем приватное” приватное свойство (_age). О данной теме, я написал статью, некоторое время назад.

К счастью, у нас теперь есть способ лучше, сделать это с новой возможностью ECMAScript 6: символы.

Так что же такое символ? Это уникальный и немутабельный тип данных, может быть использован как идентификатор для свойств объекта. Если у вас нет символа, вы не можете получить доступ к свойству.

Тем самым мы имеем более “приватный” доступ к свойствам.

Или, по крайней мере, менее доступный. Символы полезны для создания уникальных имён, но уникальность не значит приватность. Уникальность всего лишь означает, что если вам нужен ключ, который не будет конфликтовать с другими ключами, создайте новый символ.

Однако пока что это не совсем приватно, благодаря Object.getOwnPropertySymbols, конечный пользователь может получить доступ к свойству символа.

2. Работа с Наследованием

Как только у нас есть классы, нам также нужно и наследование. Опять же в ES5 есть возможность симулировать наследование, но это довольно сложно сделать.

К примеру, вот как выглядит TypeScript код для симуляции наследования:

Не слишком легко читать.

Альтернатива ECMAScript 6 гораздо лучше:

Благодаря ключевому слову extends вы можете указать, что класс является потомком другого класса, ссылку на родительский класс можно задать ключевым словом super.

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

3. Почему Использование TypeScript становится даже более актуальным, чем прежде

Со всеми новыми возможностями доступными в нашем браузере, я думаю использование TypeSciprt становится ещё более актуальным для генерации JavaScript кода.

Для начала, последняя версия TypeScript (1.4) добавила поддержку ECMAScript 6 (ключевые слова let и const), так что вы можете работать с уже существующим TypeScript кодом, включив опцию для генерации ECMAScript 6 кода.

Но если вы посмотрите ближе на TypeScript, можно заметить, что он очень похож на ECMAScript 6 без типов. Так что изучения TypeScript сегодня, это отличный способ понять ECMAScript 6 завтра!

Заключение

Используя TypeScript, вы можете получить всё это сейчас, ваш код будет работать во всех браузерах, так как он будет сконвертирован в ECMAScript 5. Если вы хотите использовать ECMAScript 6 прямо в браузере, вы можете обновиться до Windows 10 и протестировать код в Microsoft Edge.

Если вы только хотите взглянуть на некоторые из особенностей нового браузера, remote.modern.ie предоставляет доступ к удалённому компьютеру с Windows 10 и Microsoft Edge. Это также будет работать на Mac OS или Linux.

Конечно Microsoft Edge не единственный браузер, поддерживающий стандарт ES6. Остальные браузеры также работают над добавлением нововведений ES6, вы можете проверить поддержку на: http://kangax.github.io/compat-table/es6/.

Будущее JavaScript с ECMAScript 6 довольно яркое, и честно говоря я не могу дождаться поддержки во всех современных браузерах.

Эта статья является частью серии для разработчиков от Microsoft. Мы хотим поделиться особенностями Microsoft Edge и новым движком EdgeHTML rendering engine. Получите бесплатный доступ к виртуальным машинам, для удалённого тестирования на Mac, iOS, Android, или Windows устройствеhttp://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.