Class super

⏪

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

super

Методы родительского класса доступны в дочернем классе посредством ключевого слова super

Расширим метод drawLine родительского класса, добавив аргумент lineWidth ( толщину линии )

Для этого определим "расширенный" метод drawLine внутри дочернего класса,
который будет вызывать метод drawLine родительского класса
с помощью ключевого слова super:

super.drawLine ( points, lineColor )

Теперь код будет таким:

const Canvas = class {
    constructor () {
        this.canvas = document.createElement ( 'canvas' )
        document.body.appendChild ( this.canvas )
        this.canvas.style.border = "1px solid #000000"
        this.area = this.canvas.getContext ( "2d" )
    }
    drawLine ( points ) {
        this.area.beginPath()
        this.area.moveTo( points[0].x, points[0].y )
        this.area.lineTo( points[1].x, points[1].y )
        this.area.stroke()
    }
}

class ExtendedCanvas extends Canvas {
    drawLine ( points, lineColor, lineWidth ) {
        this.area.lineWidth = lineWidth || 3
        this.area.strokeStyle = lineColor
        super.drawLine ( points )
    }
}

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

let newCanvas = new ExtendedCanvas ()

и вызовем его метод drawLine

newCanvas.drawLine (  [ { x: 20, y: 20 }, { x: 300, y: 400 } ], "#ffaa00", 10 )

Теперь линия будет отрисовываться заданной толщины

---

super ()

В предыдущих примерах мы не использовали конструктор наследующего класса

☝ Когда нужно добавить свойства 
 экземпляру наследующего класса,
 без конструктора это сделать невозможно

✋ Первое, что нужно выполнить в конструкторе наследующего класса - вызвать метод super ()

const Canvas = class {
    constructor () {
        this.canvas = document.createElement ( 'canvas' )
        document.body.appendChild ( this.canvas )
        this.area = this.canvas.getContext ( "2d" )
    }
    drawLine ( points ) {
        this.area.beginPath()
        this.area.moveTo( points[0].x, points[0].y )
        this.area.lineTo( points[1].x, points[1].y )
        this.area.stroke()
    }
}

class ExtendedCanvas extends Canvas {
    constructor () {
        super ()
        this.history = []
    }
}

В противном случае будет сгенерировано исключение:

⛔️ Uncaught ReferenceError: 
Must call super constructor in derived class before accessing 'this' or returning from derived constructor

super в литералах объектов

Ключевое слово super можно использовать без объявления классов
Он является просто ссылкой на прототип объекта
Поэтому можно использовать его для доступа к свойствам и методам объекта-прототипа

В примерах далее мы будем использовать объекты, объявленные в литеральной форме
В качестве прототипа объекта person будет выступать объект human
Назначать объект human прототипом объекта person мы будем с помощью метода

Object.setPrototypeOf ( person, human )

После такого назначения внутри объекта person
свойства и методы объекта human будут доступны
с помощью ключевого слова super

В следующем примере вызовем методы place () и say ()
прототипа human
в методах getPlace () и talk ()
объекта person
с помощью ключевого слова super :

☕ 1️⃣

let human = {
    place () {
        var x = document.createElement ( "p" )
        document.body.appendChild ( x )
        x.id = "demo"
        return x
    },
    say ( text ) {
        this.place.innerHTML = text
    }
}

let person = {
    getPlace () { this.place = super.place () },
    talk ( text ) {
        super.say ( text )
    }
}

Object.setPrototypeOf ( person, human )
person.getPlace ()
person.talk ( "привет!" )

☕ 2️⃣

✍ В этом примере метод place() прототипа ( объекта human )
проверяет наличие элемента с id === "demo",
и если такой элемент найден,
возвращает ссылку на него,
в противном случае создает такой элемент,
добавляет его на страницу и возвращает ссылку на него

✍ Объект person изначально не имеет свойства place,
но имеет собственный метод getPlace (),
который создает такое свойство,
вызывая с помощью ключевого слова super
метод place() прототипа ( объекта human ),
и присваивая возвращенное этим методом
значение собственному свойству place

✍ Метод talk( text ) объекта person
вызывает метод getPlace()
до вызова метода say ()
прототипа ( объекта human )

let human = {
    place: () => 
        document.getElementById ( "demo" ) ? 
        document.getElementById ( "demo" ) :
        document.body.appendChild ( 
            document.createElement ( "p" ) 
        ).id = "demo",

    say ( text ) {
        this.place.innerHTML = text
    }
}

let person = {
    getPlace () { this.place = super.place() },
    talk ( text ) {
        this.getPlace ()
        super.say ( text )
    }
}

Object.setPrototypeOf ( person, human )

person.talk ( "привет!" )
setTimeout ( () => person.talk ( "Hello, baby!" ), 2000 )

☝ Обратите внимание,
что при объявлении метода place() объекта human
мы использовали стрелочную функцию,
а при объявлении метода say ее использовать нельзя,
поскольку внутри методов,
объявленных с помощью стрелочных функций,
контектом вызова будет глобальный объект window

⏪