构造函数中的函数抛出错误未定义访问公共构造函数变量

Question

我一直在清理很多动画代码，但我遇到了许多相似但不同的问题。

这次我在构造函数中有一个构造函数 - 但这不是问题，至少在表面上是这样。

问题是在嵌套的构造函数中，有一个正常的函数this.draw，应该引用this.ctx。但这不会发生。我一开始认为可能是因为ctx在被引用之前没有在加载时被声明，但是当我将this.ctx = "";只是给它一个占位符时它没有修复它。

什么事在这里？这是嵌套构造函数的原型调用，.draw函数试图引用它的this.ctx：

DrawDeerbra.prototype.Circle = function(){
  this.ctx = "";
  if(this.constructor.count1 >= this.constructor.count2){
    this.ctx = this.constructor.ctx2;
    this.count = 2;
    ++this.constructor.count2;
  } else {
    this.ctx = this.constructor.ctx1;
    this.count = 1;
    ++this.constructor.count1;
  }


  this.draw = function(){ 
      var ctx = this.ctx;
      ctx.fillStyle = this.color;
      ctx.shadowColor = this.color;
      ctx.shadowBlur = (this.size*2) * Math.abs(Math.sin(this.shadowFrame));
      ctx.beginPath();
      ctx.arc(this.pos.x, this.pos.y, this.size, 0, Math.PI*2);
      ctx.fill();
      ctx.closePath();
  }
}

这是嵌套Circle构造函数的.draw被调用的地方 -

DrawDeerbra.prototype.anim = function(){
  window.requestAnimationFrame(anim);
  this.update();
}

DrawDeerbra.prototype.update = function(){
  ++this.frame;
  
  for(var i = 0; i < this.circles.length; ++i){
    var circ = this.circles[i];
    circ.update();
    circ.draw();
    
    if(circ.pos.x - circ.size > w ||
       circ.pos.y - circ.size > h ||
       circ.pos.x + circ.size < 0 ||
       circ.pos.y + circ.size < 0){
      
      if(circ.count === 1) --count1;
      else --count2;
      
      this.circles[i] = new Circle;
    }
  }
}

在此之前有一个函数用嵌套的Circle构造函数填充圆数组，然后调用.anim和.update