未读取 Javascript 类属性

Question

---

属性 x,y,width,height 没有被读取!当我执行 .drawImage() 时，未使用 this.x、this.y、this.width、this.height!

假设我改变了 x 图像不会改变它的位置。但是，如果我 alert(this.x) 或任何变量，那么它将打印出正确的值。

感谢社区的帮助!

var Enemy = function(word, x, y, width, height) {

  this.word = word;

  //Position of the Enemy Spawn
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}
Enemy.prototype.draw = function() {
  var image = new Image();
  image.onload = function() {
    Context.context.drawImage(image, this.x, this.y, this.width, this.height)
  };
  image.src = "enemy.png"
  // If I do alert(this.x), it returns the correct value!!!
}

这是初始化:

var myEnemy = new Enemy("TestEnemy", 100, 100, 100, 100);
myEnemy.draw();

---

Answer 1

您的问题与您如何使用 this 有关。您在 image.onload = function() 中引用 this.x。由于 this 在当前执行上下文中解析，在这种情况下 this 将引用正在加载的图像。当您需要将 this 称为 Enemy 时，您可以创建一个变量引用来维护 Enemy 的上下文:

Enemy.prototype.draw = function(){
  var image = new Image();
  var self = this;
  image.onload = function() {
    Context.context.drawImage(image, self.x, self.y, self.width, self.height);
  };
  image.src = "enemy.png";
}

当您执行 alert(this.x) 时，您将获得正确的值，因为您调用它的范围是正确的。要查看实际效果，请添加以下代码并在您的浏览器开发工具中查看结果:

var self = this;
image.onload = function() {
  console.log(this);
  console.log(self);
}