将动画代码重构为 class，在访问 class 变量时收到错误

Question

与我最近 post 的一个相似但不同的问题 -

我在尝试从原型调用内部访问 class 变量时遇到错误 "Cannot set property 'globalCompositeOperation' of undefined"。这是代码-

var DrawSlinky = function() {
    this.c = document.getElementById("c"),
    this.w = c.width,
    this.h = c.height,
    this.ctx = c.getContext('2d'),
    
    this.prob = .7,
    this.minSparks = 3,
    this.maxSparks = 10,
    this.minArea = 5,
    this.maxArea = 40,
    this.minVel = 10,
    this.maxVel = 50,

    this.particles = [],
    this.frame = 0;

};

DrawSlinky.prototype.anim = function(){
  this.c.requestAnimationFrame(this.anim);
  
  this.ctx.globalCompositeOperation = 'source-over';
  
  this.ctx.fillStyle = 'rgba(0, 0, 0, .04)';
  this.ctx.shadowBlur = 0;
  this.ctx.fillRect(0, 0, w, h);
  
  this.ctx.globalCompositeOperation = 'lighter';
  
  ++frame;
  
  if(Math.random() < prob) genParticles();
  
  for(var i = 0; i < particles.length; ++i){
    var part = particles[i];
    part.use();
    
    if(part.x < 0 || part.x > w ||
       part.y < 0 || part.y > h ||
       Math.random() < .01){
      particles.splice(i, 1);
      --i;
    }
  }
};

怎么回事？

它应该引用 drawSlinky 中的 .ctx，但我遇到了无限循环的错误...

更新 - 实际上，有两个问题。一是我不知道如何在不硬编码的情况下让它工作 this.requestAnimationFrame(drawSlinky.anim);（drawSlinky 是这个 DrawSlinky class 的实例），

还有两个，this.cx.globalCompositeOperation = 'source-over'; 没有从 DrawSlinky 引用 ctx 并将其置于无限循环中。

所以我认为我需要两个方面的帮助，即使第二个问题是我最初提出的问题

Answer 1

var me = this;
this.c.requestAnimationFrame(function(){
  me.anim();
});

this 的值是在调用函数时设置的，而不是在声明函数时设置的。更多信息在这里：下的 this 变量

希望对您有所帮助

将动画代码重构为 class，在访问 class 变量时收到错误

Refactoring animation code into a class, receiving error on accessing class variable

javascript

refactoring