Прототипы и классы on JSFlow

Прототипное наследование

Mon, 01 Jan 0001 00:00:00 +0000

Прототипное наследование #

Прототип — скрытая ссылка, по которой движок ищет свойства и методы, если их нет на самом объекте. Наследование в JavaScript прототипное: объекты делегируют доступ к другому объекту-прототипу, а не копируют поля класса как в классических ООП-языках.

[[Prototype]] и поиск свойств #

У каждого объекта есть внутренняя ссылка [[Prototype]] (в консоли часто видна как __proto__, но в коде так не пишут):

const lesson = {
 title: 'Прототипы',
 level: 'middle',
}

lesson.toString() // "[object Object]"

Метода toString на lesson нет — движок поднимается по цепочке к Object.prototype и находит его там.

Классы: базовый синтаксис

Mon, 01 Jan 0001 00:00:00 +0000

Классы: базовый синтаксис #

class — объявление «типа» объекта с конструктором и методами. Синтаксис похож на классы в других языках, но в JavaScript это обёртка над прототипами: методы попадают на prototype, наследование строится через цепочку прототипов.

Объявление класса #

class Lesson {
 constructor(title, durationMin) {
 this.title = title
 this.durationMin = durationMin
 this.done = false
 }

 complete() {
 this.done = true
 return this
 }

 summary() {
 const status = this.done ? 'пройден' : 'в процессе'
 return `${this.title} (${this.durationMin} мин) — ${status}`
 }
}

const lesson = new Lesson('Замыкания', 25)
lesson.complete().summary()
// "Замыкания (25 мин) — пройден"

new обязателен — вызов Lesson() без new в классах выбросит ошибку.

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

Mon, 01 Jan 0001 00:00:00 +0000

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

extends связывает дочерний класс с родительским: экземпляры подкласса получают методы базового класса и могут переопределять их. super вызывает реализацию родителя — в constructor обязательно до использования this.

Базовый extends #

class ContentUnit {
 constructor(title) {
 this.title = title
 this.createdAt = Date.now()
 }

 label() {
 return this.title
 }
}

class VideoLesson extends ContentUnit {
 constructor(title, durationSec) {
 super(title)
 this.durationSec = durationSec
 }

 label() {
 return `${super.label()} (${this.durationSec} с)`
 }
}

const clip = new VideoLesson('Event loop', 480)
clip.label() // "Event loop (480 с)"
clip instanceof ContentUnit // true
clip instanceof VideoLesson // true

VideoLesson.prototype наследует от ContentUnit.prototype — та же прототипная модель, что и без class.

static и private #

Mon, 01 Jan 0001 00:00:00 +0000

static и private #

Статические члены принадлежат самому классу, а не экземпляру. Приватные поля и методы с префиксом # доступны только внутри тела класса — движок запрещает обращение снаружи.

static методы #

Вызываются на классе, не на экземпляре:

class Lesson {
 constructor(title, slug) {
 this.title = title
 this.slug = slug
 }

 static fromSlug(slug) {
 const title = slug.replace(/-/g, ' ')
 return new Lesson(title, slug)
 }

 static isValidSlug(slug) {
 return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug)
 }
}

Lesson.isValidSlug('event-loop') // true
const lesson = Lesson.fromSlug('event-loop')
lesson.title // "event loop"

Фабрики, валидация и утилиты без состояния экземпляра — типичные кейсы для static.

instanceof и примеси

Mon, 01 Jan 0001 00:00:00 +0000

instanceof и примеси #

instanceof проверяет, есть ли в цепочке прототипов объекта prototype указанного конструктора (или класса). Примеси (mixins) — способ добавить нескольким классам общее поведение через копирование методов, когда единственное наследование extends не хватает.

Как работает instanceof #

class Lesson {
 constructor(title) {
 this.title = title
 }
}

class VideoLesson extends Lesson {
 constructor(title, sec) {
 super(title)
 this.sec = sec
 }
}

const v = new VideoLesson('Таймеры', 900)

v instanceof VideoLesson // true
v instanceof Lesson // true
v instanceof Object // true
v instanceof Array // false

Выражение obj instanceof C ищет C.prototype в цепочке [[Prototype]] объекта obj.