获取/设置Javascript成员的正确方法？ （本期使用Kineticjs）

Question

我正在创建一个js类并实现一些Kinetic.js类和方法。 我不确定设置我的类变量之一的正确方法是什么。 我在这里：

function Canvas(){
  this.stage;
  this.backgroundLayer;
}

Canvas.prototype.init = function(w, h){
  this.stage = new Kinetic.Stage({
    container: 'container',
    width: w,
    height: h
  });

  this.backgroundLayer = new Kinetic.Layer();
  this.stage.add(this.backgroundLayer);
}

Canvas.prototype.addImg = function(){
  var imageObj = new Image();
  imageObj.onload = function() {
    var yoda = new Kinetic.Image({
      x: 200,
      y: 50,
      image: imageObj,
      width: 106,
      height: 118,
      draggable: true
    });

    this.backgroundLayer.add(yoda);
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
}

但是，在这一行：

this.backgroundLayer.add(yoda);

我收到此控制台错误：

Uncaught TypeError: Cannot call method 'add' of undefined 

作为JS的新手，我假设this.backgroundLayer不在范围内，因此未定义。 这是正确的吗？如果是，我将如何解决该问题？ 我尝试设置var v = this.backgroundLayer并将其作为参数传递给函数，然后像这样添加层： v.add(yoda) ，但是返回Uncaught TypeError: Object # has no method 'add' 。 在我看来，这似乎是一种可能的解决方案，但就像我说的那样，我对javascript有点陌生。

Answer 1

Canvas.prototype.addImg = function(){
  var self = this
  var imageObj = new Image();
  imageObj.onload = function() {
    var yoda = new Kinetic.Image({
      x: 200,
      y: 50,
      image: imageObj,
      width: 106,
      height: 118,
      draggable: true
    });

    self.backgroundLayer.add(yoda);
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
}

保留以前上下文中this的引用。 这是JavaScript的一个混乱的特点this是根据上下文变化。