<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Наследование в JavaScript ES6

Наследование в JavaScript ES6

В этой статье вы узнаете, как реализовать наследование в JavaScript, используя ключевые слова extends и super, появившиеся в ES6.

До появления ES6, для реализации наследования требовалось выполнить пару неочевидных шагов. Базовой методикой реализации являлось и является прототипное наследование. В примере ниже показано, как объект ABird наследует свойства от объекта SimpleAnimal посредством прототипного наследования.

  function SimpleAnimal(legs) {
   this.legs = legs;
  }

  SimpleAnimal.prototype.walk = function() {
   console.log('ходит на ' + this.legs + ' конечностях');
  }

  function ABird(legs) {
   SimpleAnimal.call(this, legs);
  }

  ABird.prototype = Object.create(SimpleAnimal.prototype);
  ABird.prototype.constructor = SimpleAnimal;

  ABird.prototype.fly = function() {
   console.log('летает');
  }

  var pigeon = new ABird(2);
  pigeon.walk(); // ходит на 2 конечностях
  pigeon.fly(); // летает

В ES6 последовательность необходимых действий сведена к минимуму, так как для этого используются ключевые слова JavaScript extends и super. Следующий пример определяет классы SimpleAnimal и ABird.

  class SimpleAnimal {

   constructor(legs) {
    this.legs = legs;
   }

   walk() {
    console.log('ходит на ' + this.legs + ' конечностях');
   }

  }

  class ABird extends SimpleAnimal {

   constructor(legs) {
    super(legs);
   }

   fly() {
    console.log('flying');
   }
  }


  let ABird = new ABird(2);

  ABird.walk();
  ABird.fly();

В этом примере в конструкторе класса ABird используется ключевое слово JavaScript super для вызова конструктора базового класса SimpleAnimal с указанными аргументами.

Учтите, что новая версия класса - это просто синтаксический сахар над методикой прототипного наследования в JavaScript. Другими словами, хоть JavaScript и использует новый синтаксис классов, но наследование все еще реализуется через механизм прототипов.

Класс SimpleAnimal называется базовым классом, а класс ABird - производным. В JavaScript требуется, чтобы производный класс использовал ключевое слово super, если он имеет конструктор. В примере выше, инструкция super(legs) эквивалентна следующей инструкции - SimpleAnimal.call(this, legs);

  class ABird extends SimpleAnimal {
   fly() {
    console.log('flying');
   }
  }

Это будет эквивалентно следующему:

class ABird extends SimpleAnimal {

  constructor(...args) {
   super(...args);
  }

  fly() {
   console.log('flying');
  }

}

Однако, если вы используете конструктор в производном классе, то обязательно необходимо вызвать функцию super(), в противном случае создать объект производного класса не получится.

  class ABird extends SimpleAnimal {

   constructor(legs) {}

   fly() {
    console.log('летает');
   }
  }

  let ABird = new ABird(2); // Ошибка!!!

Поскольку super() инициализирует объект базового класса, перед обращением к производному объекту, обязательно необходимо вызвать конструктор базового класса. Попытка получить доступ к производному объекту до вызова super() приводит к ошибке.

Новые свойства в производный класс добавляются после инициализации базового класса:

  class ABird extends SimpleAnimal {

   constructor(legs, color) {
    super(legs);
    this.color = color; // окраска птички
   }

   fly() {
    console.log('летает');
   }

   getColor() {
    console.log(this.color);
   }
 }


  let pegion = new ABird(2, 'белый');
  console.log(pegion.getColor());

Сокрытие методов

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

Следующий класс Dog расширяет класс SimpleAnimal и переопределяет метод walk().

  class Dog extends SimpleAnimal {

   constructor() {
    super(4);
   }

   walk() {
    console.log(`идет гулять`);
   }

  }

  let bingo = new Dog();
  bingo.walk(); // идет гулять

Чтобы вызвать метод базового класса в производном классе, нужно использовать инструкцию super.{имя метода}():

  class Dog extends SimpleAnimal {

   constructor() {
      super(4);
   }

   walk() {
      super.walk();
      console.log(`идет гулять`);
   }

  }

  let bingo = new Dog();
  bingo.walk();
  // ходит на 4 конечностях
  // идет гулять

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.