Class member variable undefined

Horst · 25. April 2019

Hallo Community,

beschäftige mich gerade mit HTML5 Und JS. Habe folgenden Code geschrieben und ich verstehe den Fehler nicht:

cute.js

Code

var cute = {};

cute.Image = class
{
    constructor(imgUrl)
    {
        this.image = new Image();
        this.image.src = imgUrl;
        console.log(this.image); // <--- works
    }

    draw(context, x, y)
    {
        this.image.onload = function()
        {
            console.log(this.image); // <--- this.image = undefined
            context.drawImage(this.image, x, y); 
        }
    }
}

Alles anzeigen

Rufe ich die Klasse Image auf und will das Image Zeichnen, ist es Undefined:

main.js

Code

var canvas = new cute.Canvas(1024, 672);
canvas.setResponsive(dimension="both");

var testImg = new cute.Image("img/buttonTemplate.png")

testImg.draw(canvas.ctx, 0, 0); // <--- here "this.image" in class Image is undefined

/* 
This works and "this.image" is NOT undefined

img = new Image();
img.src = "img/buttonTemplate.png";

img.onload = function()
{
    canvas.ctx.drawImage(img, 0, 0);
}
*/

Alles anzeigen

erstelle ich das Image allerdings ohne meine Image-Klasse (ab Zeile 8 ) in der main.js, funktioniert es.

Ich kann mir dieses Verhalten absolut nicht erklären.

Sempervivum · 25. April 2019

Das this in der anonymen Funktion des onload ist ein anderes als das this im Objekt testImg, nämlich das img-Element, auf das das onload registriert wurde.

Lösung, indem Du das this einer Variablen zuweist und diese in der Funktion ansprichst:

Code

            draw(context, x, y) {
                var that = this;
                this.image.onload = function () {
                    // bei this und that.image handelt es sich
                    // innerhalb dieser an. Funktion um das selbe Element 
                    console.log(that.image);
                    console.log(this);
                    context.drawImage(that.image, x, y);
                }
            }

Horst · 25. April 2019

Zitat

Das this in der anonymen Funktion des onload ist ein anderes als das this im Objekt testImg

Danke, das war das Problem. Nun funktioniert es.

Class member variable undefined

Jetzt mitmachen!

Teilen