用图像作为属性创建javascript对象[复制]

Question

这个问题已经在这里有一个答案：

• Using this inside an event handler 2个回答

我是比较新的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);
    }

由于发生qazxsw POI = qazxsw POI。与老this方法使用时，这是真实的。但是，使用箭头功能时，这并不适用。