В ES6 JavaScript стал намного проще благодаря синтаксису class и его дополнительным функциям. Сегодня мы собираемся объединить синтаксическую функцию class с концепцией наследования, чтобы получить некоторый код. Да, вы правильно угадали, мы собираемся взглянуть на ключевые слова super и extends в ES6 JavaScript. Лучший способ изучить новую функцию - сразу погрузиться в нее на примере. Итак, приступим!
super и расширяется в действии
Если мы хотим расширить класс в JavaScript, мы можем воспользоваться ключевыми словами super и extends для этого. Давайте посмотрим, как используются эти ключевые слова.
В приведенном выше коде есть 2 класса JavaScript, а именно Animal и Gorilla.
Класс Gorilla является подклассом или дочерним классом Animal и использует extends , чтобы установить себя в качестве подкласса.
Однако ключевое слово super использовалось по-разному.
Вы, ребята, заметили то же самое? В конструкторе Gorilla (строка 23 кода)
super используется как «функция». Принимая во внимание, что методы showVigour () (строка 35) и dailyRoutine () (строка 39) Gorilla использовали super как «объект».
Ключевое слово super используется двумя способами по следующим причинам:
В строке 23 ключевое слово super используется как «функция» , который вызывает родительский класс Animal с параметрами, переданными Gorilla. Это ключевой шаг, который необходимо выполнить, чтобы убедиться, что Gorilla является экземпляром Animal
В строках с номерами 35 и 39, super используется как «объект», который относится к экземпляру Animal (родительский класс). Ключевое слово super здесь используется для явного вызова методов родительского класса Animal.
Люди, знакомые с такими языками, как C #, Java, Python, могут в значительной степени понять, как все это работает. Однако до появления ES6 JavaScript был не так прост, особенно для классов. Так как же люди могли писать код без использования синтаксиса class, super и extends ключевых слов? Или они никогда раньше не использовали такие понятия и вдруг решили их добавить? Давайте разберемся!
Традиционные классы JavaScript
По правде говоря, объектно-ориентированный JavaScript действительно существовал и использовал прототипное наследование для расширения классов. Давайте посмотрим на тот же пример, но с традиционным синтаксисом JavaScript. Возможно, это поможет нам найти скрытую правду.
Посмотрев код, вы, ребята, должно быть, думаете, подождите секунду, где слово класс? Где находится конструктор? Как вообще можно использовать наследование в старом коде JavaScript без ключевых слов extends и super? Разве этот код не выглядит некрасиво?
Да, я знаю, что вы чувствуете, мы на одной волне. К сожалению, базовые функции JavaScript не изменились. Они всегда оставались неизменными, какие бы функции ни добавлялись в язык. Использование новых ключевых слов, таких как class, constructor, super, extends, просто добавляет синтаксис коду, чтобы сделать его читабельным и удобным для разработчиков.
Позвольте мне объяснить, какие строки кода из примера ES6 соответствуют традиционному примеру JavaScript.
Если вы, ребята, плохо знакомы с концепциями прототипа и наследования в JavaScript, ознакомьтесь со следующими статьями, прежде чем переходить к разделу сравнения:
Обе эти ссылки помогут вам действительно хорошо понять следующий раздел.
Сравнение ES6 и традиционного кода JavaScript
В следующих разделах приводится анализ и сравнение кода, написанного в стилях ES6 и традиционном JavaScript.
Объявление класса
Объявления классов сравниваются в следующем фрагменте кода.
Объявление класса в ES6 напрямую использует ключевое слово class, за которым следует определение переменных экземпляра внутри конструктора. В традиционном JavaScript нет такого понятия, как класс. Фактически, класс на самом деле является скрытой функцией JavaScript (см. Строку 11 этого фрагмента).
Функция конструктора в строке 3 точно такая же, как и в строке 14.
функция Animal здесь фактически является функцией конструктора.
Методы как часть класса
Строки кода с 4 по 14 - это методы, которые существуют в классе Animal для стиля ES6. Однако традиционно это было невозможно, поскольку не существовало такой вещи, как класс, где можно было бы так легко объявлять методы. В традиционном JavaScript добавление методов к прототипу делает методы доступными для класса. Строки с 19 по 29 - это методы для традиционных классов JavaScript.
Отображение распространяется на традиционный JavaScript
Еще большая разница возникает, когда мы пытаемся расширить родительский класс с помощью подкласса. См. Следующий фрагмент кода:
Мы видим, что ключевое слово extends расширяет родительский класс Animal до подкласса способом ES6, но super также используется здесь, чтобы убедиться, что класс Animal вызывается через конструктор Gorilla, чтобы унаследовать характеристики и поведение Animal . Здесь ключевое слово super используется как функция для вызова класса Animal для инициализации Gorilla. Здесь super эквивалентно Animal.call (this,…).
Чтобы сделать то же самое по традиции, требуется несколько дополнительных шагов. Функция для подкласса Горилла должна быть создана в соответствии со строкой 10. Поскольку Горилла унаследует характеристики и поведение Животного, она является обязательным для вызова функции конструктора Animal внутри конструктора Gorilla, как показано в строке 11, эта строка сопоставима со строкой 4 и делает то же самое. Только нам нужно явно передать ссылку this ” классу Animal, чтобы гарантировать, что вызов был сделан из класса Gorilla.
Кроме того, нам нужно установить прототип функции Gorilla как новый объект, созданный из прототипа животного как показано в строке 11. При этом мы переопределяем объект прототип Gorilla. Следовательно, в следующей строке 15 нам нужно явно указать конструктор Gorilla. Эти шаги позволяют установить класс Gorilla в качестве подкласса класса Animal.
Сопоставление super с традиционным JavaScript
Мы уже видели одно сопоставление ключевого слова super, т. Е. Строки 4 и 19 в следующем фрагменте, где super используется как функция.
Ключевое слово super также может использоваться в качестве экземпляра родительского класса, как указано в строках 8 и 12, для вызова конкретных сведений о классе Animal.
Чтобы добиться того же, в строках 26 и 30 в традиционном стиле показано, как это делается.
Экземпляр super на самом деле является ParentClassName.prototype.methodName.call (this,…). < br /> Следовательно, необходимо написать много кода, чтобы убедиться, что методы родительского класса вызываются явно.
Заключение
Я почти уверен, что вы, ребята, сразу же начнете использовать возможности класса и наследования в ES6, не моргнув глазом, как вы сейчас знать уровень сложности, обеспечиваемый традиционным способом. Кроме того, Chrome и Firefox на данный момент поддерживают ES6, но для того, чтобы все браузеры поддерживали функции ES6, потребуется транспилятор babel для преобразования всего кода ES6 в код ES5.
Удачного взлома! 😄
Другие сообщения от меня
Найдите меня по адресу: https://medium.com/@anurag.majumdar
➥ Веб-разработка
- Оболочка прогрессивного веб-приложения: ключ к загрузке вашего сайта менее чем за 1 секунду!
- Введение в полифиллы и их использование
