Объектно-ориентированное программирование в JS

В объекте, ориентированном на программирование вы группируете данные и методы в единое сущность, называемое классом и создают различные экземпляры класса, называемых объектами. Эти объекты будут иметь разные данные. Наследование – это еще одна функция OOP, она позволяет нам повторно использовать код, создавая родительские и детские классы. Родительский класс имеет код, который является общим для всех детей. Дети – это специализация родителя.

Модель наследования JavaScript

JavaScript следует за моделью наследования на основе прототипа. Прототип является свойством, что двигатель JS добавит к функции. Этот прототип объекта стажера имеет свойство конструктора по умолчанию. Чтобы проверить свойства, доступные на прототипе, вы можете использовать Object.GETOWNPROPERTYNAMES (FUNCTIONAME.PROTOTYPE), чтобы проверить, какие свойства существуют на прототипе.

Создание класса и его экземпляр

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

function Transport(mode, travelSpeed, ticketCost) {
  this.mode = mode
  this.travelSpeed = travelSpeed
  this.ticketCost = ticketCost
}

let bus = new Transport('Road', 'Slow', 'Cheap')
console.log(bus)
// Output: { mode: "Road", travelSpeed: "Slow", ticketCost: "Cheap" }

Так что здесь мы создали функцию конструктора, которая создает объект типа транспорта.

Чтобы проверить, является ли объектом экземпляром класса, используя оператор «экземпляра».

bus instanceof Transport
// Output: true

Вы также можете проверить свойства на объекте прототипа.

console.log(Object.getOwnPropertyNames(Transport.prototype))
// Output: Array [ "constructor" ]

Добавление методов в класс

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

Transport.prototype.showInfo = function() {
  console.log(this.mode, this.travelSpeed, this.ticketCost)
}
bus.showInfo()
// Output: Road Slow Cheap

Если вы проверяете свойство прототипа транспорта, теперь вы увидите метод, который мы только что добавили.

console.log(Object.getOwnPropertyNames(Transport.prototype))
// Output: Array [ "constructor", "showInfo" ]

Создание детского класса

Теперь давайте создадим отдельный тип класса для шины, так как этот объект, который будет иметь свойства, которые не требуются, не распространенные для класса транспорта.

function Bus(mode, travelSpeed, ticketCost, busType) {
  Transport.call(this, mode, travelSpeed, ticketCost)
  this.busType = busType
}

let interCityBus = new Bus('Road', 'Slow', 'Cheap', 'Sleeper')
console.log(interCityBus)
// Output: { mode: "Road", travelSpeed: "Slow", ticketCost: "Cheap", busType: "Sleeper" }

В приведенном выше примере мы создали детские родительские отношения, вызвав функцию транспортировки конструктора из функции конструктора шины. Transport.Call () похож на Super () оператор.

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

console.log(Object.getOwnPropertyNames(Bus.prototype))
// Output:  Array [ "constructor" ]

Это не имеет методов, которые были определены на родительском языке. Иметь свойства от родителя Вам нужно объединить ребенка и родительский прототип, он очень красиво объясняется и подробно в Это MDN пост и этот пост на Digital Ocean Communiy Отказ Для получения дополнительной информации о прототипах в JavaScript прочитайте эти сообщения ( JavaScript Prototype на простом языке , Прототипы в JavaScript ). Также вы можете переопределить методы у детей, присваивая ему значение в прототипе дочернего класса.

Проще работать с классами

Работа с прототипами может стать немного утомительным и запутанным. Есть еще один способ решать наследство, хотя ES 2105 принес новый синтаксис для создания класса. Механизм внутреннего наследования остается прежним, хотя. Давайте преобразом приведенный выше пример в классовое решение.

class Transport {
  constructor(mode, travelSpeed, ticketCost) {
    this.mode = mode
    this.travelSpeed = travelSpeed
    this.ticketCost = ticketCost
  }

  showInfo() {
    console.log(this.mode, this.travelSpeed, this.ticketCost)
  }
}

class Bus extends Transport {
  constructor(mode, travelSpeed, ticketCost, busType) {
    super(mode, travelSpeed, ticketCost)
    this.busType = busType
  }
}

let cityBus = new Bus('Road', 'Slow', 'Cheap', 'Seating')
cityBus.showInfo()

Там у нас есть, не выглядит не аккуратно и чисто? Мы использовали оператор Super () для передачи значений конструктору родительского класса. Кроме того, таким образом нам не нужно объединять прототипы родительского и базового класса, так как он обрабатывается JavaScript для нас. Если мы хотели изменить поведение метода ShowInfo (), мы можем сделать это просто переопределение его в детском классе.

class Bus extends Transport {
  constructor(mode, travelSpeed, ticketCost, busType) {
    super(mode, travelSpeed, ticketCost)
    this.busType = busType
  }

  showInfo() {
    console.log(this.mode, this.travelSpeed, this.ticketCost, this.busType)
  }
}

let cityBus = new Bus('Road', 'Slow', 'Cheap', 'Seating')
cityBus.showInfo()

Вам не всегда нужно устанавливать все свойства внутри конструктора, порой вы можете захотеть установить и прочитать только конкретное значение, вы можете прочитать о Getter и Benters здесь Отказ

Если вам нравится этот пост, поделитесь этим, следуйте за мной, чтобы обновить свои сообщения:).

Обложка Фото Hal Hatwood на Unsplash

Оригинал: “https://dev.to/kartik2406/object-orientated-programming-in-js-hjc”