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

Я хочу познакомить вас с серией статей о 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.

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

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

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

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

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

var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    // Methods
    Animal.prototype.doSomething = function () {
        console.log("I'm a " + this.name);
    };
    return Animal;
})();


var lion = new Animal("Lion");
lion.doSomething();

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

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

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

class AnimalES6 {
    constructor(name) {
        this.name = name;
    }

    doSomething() {
        console.log("I'm a " + this.name);
    }
}

var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();

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

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

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

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

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

class AnimalES6 {
    constructor(name) {
        this.name = name;
        this._age = 0;
    }

    get age() {
        return this._age;
    }

    set age(value) {
        if (value < 0) {
            console.log("We do not support undead animals");
        }

        this._age = value;
    }

    doSomething() {
        console.log("I'm a " + this.name);
    }
}

var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();
lionES6.age = 5;

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

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

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

var ageSymbol = Symbol();

class AnimalES6 {
    constructor(name) {
        this.name = name;
        this[ageSymbol] = 0;
    }

    get age() {
        return this[ageSymbol];
    }

    set age(value) {
        if (value < 0) {
            console.log("We do not support undead animals");
        }

        this[ageSymbol] = value;
    }

    doSomething() {
        console.log("I'm a " + this.name);
    }
}

var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();
lionES6.age = 5;

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

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

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

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

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

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

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

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var SwitchBooleanAction = (function (_super) {
     __extends(SwitchBooleanAction, _super);
     function SwitchBooleanAction(triggerOptions, target, propertyPath, condition) {
        _super.call(this, triggerOptions, condition);
        this.propertyPath = propertyPath;
        this._target = target;
     }
     SwitchBooleanAction.prototype.execute = function () {
        this._target[this._property] = !this._target[this._property];
     };
     return SwitchBooleanAction;
})(BABYLON.Action);

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

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

var legsCountSymbol = Symbol();
class InsectES6 extends AnimalES6 {
    constructor(name) {
        super(name);
        this[legsCountSymbol] = 0;
    }

    get legsCount() {
        return this[legsCountSymbol];
    }

    set legsCount(value) {
        if (value < 0) {
            console.log("We do not support nether or interstellar insects");
        }

        this[legsCountSymbol] = value;
    }

    doSomething() {
        super.doSomething();
        console.log("And I have " + this[legsCountSymbol] + " legs!");
    }
}

var spiderES6 = new InsectES6("Spider");
spiderES6.legsCount = 8;
spiderES6.doSomething();

Благодаря ключевому слову 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/.