Question

我对javascript来说还比较陌生，我以前只是用Python编程，而且在用这种语言创建对象实例时遇到困难。

class SteeringWheel {
  constructor(id) {
    this.id = id;
    this.can = document.getElementById(this.id);
    this.ctx = this.can.getContext('2d');
    this.img = new Image();
    //some img
    this.img.src = "https://images-na.ssl-images-amazon.com/images/I/41iNBF9Q%2BsL._SX425_.jpg";
    this.img.onload = function() {
      this.ctx.drawImage(this.img, 0, 0);
    }
  }

var st = new SteeringWheel('st1')

但是出现以下错误：

Uncaught TypeError: Cannot read property 'drawImage' of undefined

我试图嵌套onload函数，但是它不起作用。

this.ctx.onload = function() {
   this.img.onload = function() {
      this.ctx.drawImage(this.img, 0, 0);
    }
}

在我的.html文件中，有一个ID为'st1'的画布。在我调用上面写的脚本之后。

创建对象的原因是因为我将来的意图是调用：

var st = new SteeringWheel('st2')
var st = new SteeringWheel('st3')

并具有同一对象的多个实例。

这可能是一个愚蠢的问题，但是我被完全封锁了。

Answer 1

你能试试吗

   this.img.onload = () => {
      this.ctx.drawImage(this.img, 0, 0);
    }

因为发生this = this.img。与旧的function () {}方法一起使用时，这是正确的。但这不适用于使用箭头功能的情况。

以图片为属性创建JavaScript对象

1 个答案: