Class extends

⏪

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

extends

Ключевое слово extends используется для создания дочернего класса
Фактически мы передаем с помощью extends ссылку на прототип

Если в классе исполь

☕ 1

Объявим класс Provider

class Provider extends Array {
    constructor () {
        super();
        [ "Google", "Mozilla", "Opera", "Safari", "IE" ].forEach (
            ( item, index ) => this[ index ] = item
        )
    }
    valueOf() {
        return this.length
    }
}

^{Обратите внимание, что в конструкторе класса первым делом с помощью super() мы вызываем конструктор родительского класса}

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

let provider = new Provider

Посмотрим на цепочку прототипов

▼ Provider(5) ["Google", "Mozilla", "Opera", "Safari", "IE"]
    0: "Google"
    1: "Mozilla"
    2: "Opera"
    3: "Safari"
    4: "IE"
    length: 5
  ▼ __proto__: Array
      ► constructor: class Provider
      ► valueOf: ƒ valueOf()
      ► __proto__: Array(0)

Теперь протестируем экземпляр:

provider instanceof Provider  // true
provider instanceof Array     // true

provider + 5   // 10
provider * 3   // 15

---

☕ 2

const Canvas = class {
    constructor () {
        this.canvas = document.createElement ( 'canvas' )
        document.body.appendChild ( this.canvas )
        this.canvas.height = "400"
        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 {
    drawCircle ( center, radius ) {
        this.area.beginPath()
        this.area.arc( center.x, center.y, radius, 0, 2 * Math.PI )
        this.area.stroke()
    }
}

let newCanvas = new ExtendedCanvas ()
newCanvas.drawCircle ( { x: 100, y: 100 }, 100 )
newCanvas.drawLine (  [ { x: 20, y: 20 }, { x: 300, y: 400 } ] )

👉 Обратите внимание, что метод drawCircle находится в прототипе экземпляра
( что логично, поскольку это метод класса ),
а метод drawLine родительского класса Canvas
находится в прототипе прототипа
( что соответствует прототипной модели наследования -
мы получили цепочку прототипов )

⏪