如何将加载事件侦听器添加到对象javascript

Question

我目前正在开发一个在 javascript 中使用精灵的游戏，我想添加一个事件侦听器，在游戏开始之前检查精灵图像是否已加载。我正在使用面向对象的编程，我遇到了一些问题......我将展示一个我想到的例子：

function Sprite() {
    this.img = new Image();
    // either this:
    this.img.onload = function() {
    }
    // or this:
    this.img.addEventListener("load", function() {
        // Either way, when it loads, then it could proceed with the move or draw methods.
        // I don't even know how to do this yet...
    });

    this.img.src = "res/image.png";

    this.draw = function() {
        context.drawImage(//with all the parameters);
    }

    this.move = function() {
        // code that makes the sprites move
    }
}

无论哪种方式，以及我尝试过的任何方式，它都无法正常工作而不会显示任何错误。它只是不显示精灵。有谁知道怎么回事？

Answer 1

使用var self = this; 明确捕获语义。通过在名为self 的变量中引用this，您将能够在Sprite 的图像加载函数中调用self.draw。

问题可能是您在 onload 中尝试了 this.draw，但在这种情况下，this 指的是匿名函数而不是 Sprite。请参见下面的示例。

除此之外，我认为评论者的建议是您在加载图像时出错。这是一个使用堆栈溢出使用的 CDN 之一的图像的示例：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function Sprite() {

    var self = this;
    self.img = new Image();

    self.draw = function() {
        context.drawImage(self.img, 0, 0);
    }

    self.move = function() {
        // code that makes the sprites move
    }

    // or this:
    self.img.addEventListener("load", function() {
        self.draw();
    });

    self.img.src = "https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3g";
}

var s = new Sprite();

<canvas id="canvas" width="300" height="300"></canvas>