Question

我有没有办法在image.onload中引用类对象？ this指的是图像本身。我怎么能引用Texture对象？

function Texture(url){
  this.image = new Image();
  this.image.src = url;
  this.image.onload = function(){
    this.width = this.image.width;
    this.height = this.image.height;
  }
}

text = new Texture("http://opengameart.org/sites/default/files/styles/watermarked/public/bone2-equus_hemionus.png");

document.body.innerHTML += text.image + "<br>";
document.body.innerHTML += text.image.src + "<br>";
document.body.innerHTML += text.image.width + "<br>";

我已尝试在Texture类

中使用类似的东西

self = this;
this.image.onload = function(self){
    self.width = self.image.width;
    self.height = self.image.height;
}

但显而易见它不起作用

Answer 1

您必须从处理程序中删除self参数：

self = this;
this.image.onload = function(){ 
  self.width = self.image.width;     
   self.height = self.image.height;
}

另一种选择是将函数绑定到此，但使用纯javascript时这很复杂。

Answer 2

你有各种选择。

首先：使用this answer建议的Function.bind解决方法。

第二次：像这样使用function Texture(url){ this.image = new Image(); this.image.src = url; var loadHandler = function(){ this.width = this.image.width; this.height = this.image.height; }; this.image.onload = loadHandler.bind(this); }。

this

第三：使用ES6箭头功能，这将保留其身体中的{{1}}上下文（如果您的环境可以支付ES6）。 Here是一篇很好的文章。

参考＆＃34; class＆＃34;对象函数中的对象＆＃34;类＆＃34;

2 个答案: