Так или иначе, мой класс не может определить некоторые переменные

Question

Итак, я использую любые объектно-ориентированные опции, чтобы попытаться создать аккуратный класс статического изображения, поэтому все, что мне нужно сделать, это добавить указанный класс в Canvas, и он будет выделен сам!Чтобы проверить, все ли работает, я добавил несколько предупреждений.Теперь моя функция начинает извергать 'undefined' в третьем предупреждении.

function StaticImage(imgsource, cancontext, ex, wy) {
    this.x = ex;
    this.y = wy;
    this.context = cancontext;
    alert("Image class instantiated! " + imgsource);
    this.draw = function () {
        this.image = new Image();
        this.image.src = imgsource;
        alert("Draw function called!");
        this.image.onload = function () {
            alert(this.image + " loaded! drawing on: " + this.context + " at: " + this.x + ":" + this.py);
        };
        this.cancontext.drawImage(this.image, this.x, this.y);
    }
}

, так что это будет класс, и это бит Javascript, используемый на HTML-странице, которая хранит Canvas.Сначала он создает изображение bla.jpg, а затем делает то же самое, только с классом ...

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var bla = new Image();
bla.src = "bla.jpg";
bla.onload = function () {
    context.drawImage(bla, 50, 50);
};
var lol = new StaticImage("bla.jpg", context, 200, 200);
lol.draw();

Answer 1

function StaticImage(src, context, x, y) {    
    this.x = x;
    this.y = y;
    this.context = context;

    // save reference to the instance
    var self = this; 

    // initialize the image at initialization 
    // time instead of at every draw
    self.image = new Image();
    self.image.onload = function() {
        // self will still refer to the current instance
        // whereas this would refer to self.image
        alert(self.image + " loaded! drawing on: " + self.context +
              " at: " + self.x + ":" + self.y);
    };
    self.image.src = src;

    alert("Image class instantiated! " + src);
}

// make draw function part of the prototype
// so as to have only 1 function in memory
StaticImage.prototype.draw = function() {
    alert("Draw function called!");
    this.context.drawImage(this.image, this.x, this.y);
};
​

Примечание: также важно установить src изображения после того, как вы установили обработчик загрузки, потому что если изображение находится в кэше, вы можете пропустить событие.

Answer 2

Полагаю, проблема в том, что в

  this.image.onload = function() {
    alert(this.image + " loaded! drawing on: " + this.context + " at: " + this.x + ":" + this.py);
  }

область действия функции onload - это объект, хранящийся в this.image. Таким образом, this внутри функции означает само изображение. И свойства image, context, x и y, вероятно, не определены для этого класса.