Class static - garevna/js-course GitHub Wiki

⏪

🎓 static

Статические методы класса объявляются с помощью ключевого слова static

Эти методы могут быть вызваны только как методы класса

⚠️ Внутри статического метода this указывает на конструктор класса, а не на экземпляр

☕ 1️⃣
class Canvas {
    constructor () {
        this.canvas = document.createElement ( 'canvas' )
        document.body.appendChild ( this.canvas )
        Canvas.resizeCanvas.call ( this.canvas )
        this.canvas.style.border = "1px solid #000000"
        this.area = this.canvas.getContext ( "2d" )
    }
    static resizeCanvas ( event ) {
        this.width = window.innerWidth - 30
        this.height = window.innerHeight - 20
    }
    static drawLine ( context, points ) {
        context.area.moveTo( points[0].x, points[0].y )
        context.area.lineTo( points[1].x, points[1].y )
        context.area.stroke()
    }
}

let pict = new Canvas ()
window.onresize = Canvas.resizeCanvas.bind ( pict.canvas )
Canvas.drawLine ( pict, [ { x: 50, y: 50 }, { x: 250, y: 250 } ] )
Canvas.drawLine ( pict, [ { x: 250, y: 250 }, { x: 100, y: 250 } ] )

✋ Обратите внимание, что статические методы resizeCanvas и drawLine
вызываются как методы класса Canvas:

Canvas.resizeCanvas
Canvas.drawLine

✋ Внутри конструктора this указывает на экземпляр

В этом примере для того, чтобы внутри метода this указывал на объект canvas экземпляра,
вызов метода resizeCanvas из конструктора происходит с передачей контекста:

Canvas.resizeCanvas.call ( this.canvas )

и когда этот метод используется в качестве обработчика события resize объекта window,
то выполняется явная привязка контекста:

window.onresize = Canvas.resizeCanvas.bind ( pict.canvas )

При вызове статического метода drawLine первым аргументом ему передается контекст вызова

✍ Примечание:

В данном случае объявление метода drawLine как статического
создает ненужные сложности с передачей контекста,
и гораздо проще объявить его так:

drawLine ( points ) {
    this.area.moveTo( points[0].x, points[0].y )
    this.area.lineTo( points[1].x, points[1].y )
    this.area.stroke()
}

чтобы контекстом вызова был экземпляр, создаваемый конструктором

⏪
☕ 2️⃣
class Canvas {
    constructor () {
        this.canvas = document.createElement ( 'canvas' )
        document.body.appendChild ( this.canvas )
        Canvas.resizeCanvas ()
    }
    static resizeCanvas ( event ) {
        console.log ( `name: "${this.name}"` )
    }
}

var pict = new Canvas ()
window.onresize = Canvas.resizeCanvas

Когда метод resizeCanvas() будет вызван из конструктора, он выведет в консоль:

name: "Canvas"

Измените размер окна браузера
Теперь метод resizeCanvas() будет вызван в глобальной области видимости,
и в консоль будет выведено:

name: ""

поскольку this внутри resizeCanvas() теперь указывает на глобальный объект ( window )

⏪

© Irina H.Fylyppova 2018

⚠️ **GitHub.com Fallback** ⚠️