在ES6 JavaScript中调用类时，为什么我得到null值？ [重复]

Posted 2021-04-15

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

• How to access the correct `this` inside a callback? 10个答案

编辑：这个问题和答案要好得多，并且比另一个说“重复”的答案更有意义。值得保留这个进一步的参考，加上这是初学友好，因为我不知道callbacl是什么和所有令人困惑的foo boo bar的例子...

在另一个类的方法中调用类时，我得到null值。我想在javascript画布中设置对象的动画。

我正在用JavaScript画布制作一个小动画，我也在学习一般的类和JavaScript。所以一个新手问题。

如何删除错误并使其工作？

这是codepen：https://codepen.io/Aurelian/pen/mGWVbq?editors=0010

这是JS：

'use strict';
function random(min, max) {
  return Math.random() * (max - min) + min;
}
   /*
    * ------------------------------------------
    * *-----------------------------
    *  User Event
    * *-----------------------------
    * ------------------------------------------
    */
   class UserEvent {
      constructor(canvasBody) {
         this.UP_ARROW = 38 || 87,
         this.RIGHT_ARROW =39 || 68,
         this.DOWN_ARROW = 37 || 83,
         this.LEFT_ARROW = 40 || 65,
         this.keys = []

         canvasBody.addEventListener('keydown', (e) => {
            this.keys[e.keyCode] = true;
         });

         canvasBody.addEventListener('keyup', (e) => {
            this.keys[e.keyCode] = false;
         });
      }

      checkKey(key) {
         return this.keys[key];
      }

//       ufoMove() {
//          this.canvasBody.checkKey(this.UP_ARROW)
//          this.canvasBody.checkKey(this.RIGHT_ARROW)
//          this.canvasBodycheckKey(this.DOWN_ARROW)
//          this.canvasBody.checkKey(this.LEFT_ARROW)
//          console.log(this.canvasBody.leftArrow = this.checkKey(this.LEFT_ARROW))

//          if(this.UP_ARROW) {
//             this.x += this.x * this.velocity.x
//          }
//       }
   }


   /*
    * ------------------------------------------
    * *-----------------------------
    *  UFO
    * *-----------------------------
    * ------------------------------------------
    */
   class Ufo {
      constructor(x, y) {
         this.x = x,
         this.y = y,
         this.velocity = {
            x: 3,
            y: 3
         }
      }

      draw(c) {
         c.save()
         c.beginPath()
         c.arc(this.x, this.y, 50, 0, Math.PI * 2, false)
         c.fillStyle = "#fff";
         c.shadowColor = "#e3eaef";
         c.shadowBlur = 20;
         c.fill()
         c.closePath()
         c.restore()
      }

      update(c) {
         this.draw(c)
         // Get the keys first
         // this.EventUser.ufoMove(c);
         this.x = this.x + random(-5,5);
         this.y = this.y + random(-5,5);
         //    this.x = this.x + this.velocity.x;
         // }
      }
   }

   /*
    * ------------------------------------------
    * *-----------------------------
    *  Canvas
    * *-----------------------------
    * ------------------------------------------
    */      
   class CanvasDisplay {
      constructor() {
         this.canvas = document.querySelector('canvas');
           this.ctx = this.canvas.getContext('2d');
         this.stageConfig = {
              width: window.innerWidth,
              height: window.innerHeight
         };         
         this.canvas.width = this.stageConfig.width;
         this.canvas.height = this.stageConfig.height;

         this.backgroundGradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height);
         this.backgroundGradient.addColorStop(0, '#171e26');
         this.backgroundGradient.addColorStop(1, '#3f586b');

         this.Ufo = new Ufo(this.canvas.width / 2, this.canvas.height / 2);
         this.UserEvent = new UserEvent(document.body);
      }

      animate() {
         this.ctx.fillStyle = this.backgroundGradient;
         this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

         this.Ufo.update(this.ctx)
         window.requestAnimationFrame(this.animate);
      }
   }

   let canvasDisplay = new CanvasDisplay();
   canvasDisplay.animate();

答案

问题是

window.requestAnimationFrame(this.animate);

当你将一个函数作为回调传递时，如果它被正常调用，它就不会保留它所具有的调用上下文，例如，如this.animate()，它将具有this的调用上下文。就像是

function runCallback(callback) {
  callback();
}

默认情况下，它将在没有调用上下文的情况下运行callback。

所以，在animate，当第一行是

this.ctx.fillStyle = ...

发生错误，因为当this由于animate而被调用时，requestAnimationFrame没有引用实例化对象。

相反，当您将this传递给this.animate时，要么将调用上下文显式绑定到requestAnimationFrame：

window.requestAnimationFrame(this.animate.bind(this));

或者传递一个调用this.animate()的函数：

window.requestAnimationFrame(() => this.animate());

另一答案

您必须绑定范围：

window.requestAnimationFrame(this.animate.bind(this));

因为匿名函数不会通过它自己绑定它。

编辑：没见过@CertainPerformance的答案。