JavaScript позволяет нам наследовать свойства и методы от других классов. Но у модели наследования JS есть несколько ограничений:
- Класс может расширять только один другой класс. Это означает, что в JS запрещено множественное наследование. Иногда это может показаться ограничивающим.
- Когда мы расширяем класс, все его методы наследуются в подклассе. Иногда мы этого не хотим.
Чтобы понять второе ограничение, упомянутое выше, давайте рассмотрим пример.
Предположим, у нас есть класс Human, который имеет три метода: eat (), walk () и talk () . У нас также есть класс Робот. Теперь у этого класса Robot должны быть методы walk () и talk (), но не метод eat () (поскольку, как вы знаете, роботы не могут есть).
Поэтому обычно класс Robot хотел бы унаследовать от класса Human. Но в этом случае класс Robot также будет иметь доступ к методу eat () класса Human.
Вот здесь-то и пригодятся миксины.
Чтобы решить вышеупомянутую проблему, мы собираемся объявить три разных объекта: еда, ходьба и разговор. Теперь эти объекты будут содержать методы eat (), walk () и talk () соответственно.
Вот как должен выглядеть ваш код прямо сейчас:
Теперь мы отдельно создадим классы Human и классы Robot. Затем, соответственно, мы добавим необходимые методы к прототипу подходящего класса с помощью метода assign () класса Object. Object.assign () - это функция ES6.
Давайте сначала определим наш класс Human. Помните, что в этом классе у нас будут все три метода.
Что делает метод assign: он берет три объекта, т. Е. есть, ходьба и разговаривает, и помещает их в прототип человеческий класс. Мы можем проверить то же самое, перейдя к инструментам разработчика Chrome (Ctrl + Shift + I):
Мы видим, что прототип класса Human содержит три обязательных метода: eat (), talk () и walk (). Это означает, что любой экземпляр класса Human может получить доступ к этим методам. Посмотрим, как это происходит:
В приведенной выше части кода мы создали два объекта Human: john и smith. И оба эти объекта имеют доступ ко всем трем методам.
Теперь перейдем ко второй задаче - созданию класса Robot. Помните, что у этого класса должны быть только методы walk () и talk ().
Обратите внимание, что мы просто добавляем ходящие и говорящие объекты к прототипу класса Robot. Мы можем еще раз проверить это, набрав Robot.prototype в консоли Chrome, как мы это делали ранее.
Здесь мы снова создали два объекта класса Robot: robo1 и robo2. Оба эти объекта могут обращаться к методам walk () и talk (). Теперь давайте посмотрим, что произойдет, если мы попытаемся вызвать метод eat (), который не является частью прототипа робота.
Теперь, если мы перейдем к консоли, мы увидим, что произошла ошибка. В нем говорится, что robo1.eat () не является функцией. Это очевидно. Поскольку мы не добавляли этот метод в прототип робота, ни один объект Robot не имеет к нему доступа.
Я надеюсь, что эта статья дала вам общее представление о миксинах JavaScript.
Вы можете получить полный html-файл со всеми скриптами, упомянутыми в этой статье, здесь:
Вы также можете обратиться к нижеприведенному для более углубленного изучения темы:
