Class extends - garevna/js-course GitHub Wiki
| ⏪ |
|---|
Ключевое слово 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
находится в прототипе прототипа
( что соответствует прототипной модели наследования -
мы получили цепочку прототипов )
| ⏪ |
|---|
