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

Наследование классов JavaScript использует ключевое слово extends.

Наследование позволяет определить класс на основе другого класса, что упрощает создание и поддержку приложения.

super()Метод используется для вызова конструктора родительского класса.

При создании класса не нужно заново переписывать новые элементы данных и функции-члены; достаточно указать, что новый класс наследует члены существующего класса. Этот существующий класс называетсябазовым классом (родительским классом), а новый класс называетсяпроизводным классом (дочерним классом)。

Наследование представляет собой отношение«является». Например, млекопитающее — это животное, собака — это млекопитающее, следовательно, собака — это животное, и так далее.

Код выглядит следующим образом:

//Базовый класс class Animal { //функция eat() //функция sleep() }; //Производный класс class Dog extends Animal { //функция bark() };

В следующем примере создаётся класс "Example", который наследует класс "Site":

Пример

class Site { constructor(name) { this.sitename = name; } present() { return 'Мне нравится' + this.sitename; } } class Example extends Site { constructor(name, age) { super(name); this.age = age; } show() { return this.present() + ', он был основан' + this.age + 'year.'; } } let noob = new Example("Example", 5); document.getElementById("demo").innerHTML = noob.show();

Попробуйте сами »

super()Метод вызывает конструктор родительского класса.

Вызывая метод в конструкторе,super()мы вызываем конструктор родительского класса, что позволяет получить доступ к свойствам и методам родительского класса.

Наследование полезно для повторного использования кода.

В JavaScript нет традиционных классов, как в других языках программирования; он основан на модели прототипного наследования.

ES6 ввёл класс иclassключевое слово, но лежащий в основе механизм по-прежнему основан на прототипном наследовании.

Использование наследования по цепочке прототипов

В следующем примере Animal — это базовый класс, а Dog — подкласс, который наследует от Animal. Dog.prototype использует Object.create(Animal.prototype) для создания нового объекта, который наследует методы и свойства Animal.prototype. При установке Dog.prototype.constructor в Dog гарантируется корректность конструктора в цепочке наследования.

Пример

function Animal(name) { this.name = name; } Animal.prototype.eat = function() { console.log(this.name + " ест."); }; function Dog(name, breed) { Animal.call(this, name); this.breed = breed; } //Установите цепочку прототипов так, чтобы Dog наследовал от Animal Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(this.name + " лает."); }; var dog = new Dog("Buddy", "Labrador"); dog.eat(); //Вызовите метод, унаследованный от Animal dog.bark(); //Вызовите метод Dog

Использование наследования классов в ES6

ES6 ввёл ключевое слово class, сделав определение классов и наследование более понятными. Ключевое слово extends используется для установления отношения наследования, а ключевое слово super — для вызова конструктора родительского класса в конструкторе подкласса.

Пример

class Animal { constructor(name) { this.name = name; } eat() { console.log(this.name + " ест."); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } bark() { console.log(this.name + " лает."); } } const dog = new Dog("Buddy", "Labrador"); dog.eat(); dog.bark();

Независимо от того, используете ли вы наследование через цепочку прототипов или наследование классов ES6, можно достичь схожих эффектов наследования. При выборе способа вы можете решить, исходя из личных предпочтений и требований проекта.

Геттеры и сеттеры

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

Геттеры и сеттеры делают операции со свойствами очень гибкими

Чтобы добавить геттеры и сеттеры в класс, используйте ключевые слова get и set.

Следующий пример создает геттер и сеттер для свойства sitename:

Пример

class Example { constructor(name) { this.sitename = name; } get s_name() { return this.sitename; } set s_name(x) { this.sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.s_name;

Попробуйте сами »

Примечание:Несмотря на то что геттер является методом, не используйте круглые скобки, когда хотите получить значение свойства.

Имена методов getter/setter не могут совпадать с именем свойства; в этом примере свойство называется sitename.

Многие разработчики используют символ подчеркивания перед именем свойства_чтобы отделить getter/setter от самого свойства:

В следующем примере используется символ подчёркивания_для установки свойства и создаются соответствующие методы getter/setter:

Пример

class Example { constructor(name) { this._sitename = name; } get sitename() { return this._sitename; } set sitename(x) { this._sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.sitename;

Попробуйте сами »

Чтобы использовать сеттер, используйте тот же синтаксис, что и при установке значения свойства. Хотя set — это метод, его следует указывать безкруглых скобок：

Пример

class Example { constructor(name) { this._sitename = name; } set sitename(x) { this._sitename = x; } get sitename() { return this._sitename; } } let noob = new Example("Example"); noob.sitename = "EXAMPLE"; document.getElementById("demo").innerHTML = noob.sitename;

Попробуйте сами »

Поднятие

Важное различие между объявлениями функций и объявлениями классов заключается в том, что объявления функций поднимаются, а объявления классов — нет.

Сначала нужно объявить класс, а затем обращаться к нему; иначе код наподобие следующего вызовет ReferenceError:

Пример

//Здесь нельзя использовать класс таким образом, потому что он ещё не объявлен. //noob = new Example("Example") //Ошибка class Example { constructor(name) { this.sitename = name; } } //Здесь класс можно использовать. let noob = new Example("Example")

Использование без объявления вызовет ошибку:

Если он объявлен до использования, он выполняется нормально:

Другие расширения