Question

我使用JavaScript中的方法class Cars创建了此animate。我想创建一个汽车原型。当我尝试调用该方法时，我不断得到：

TypeError: cannot read property 'carTag' of null of 'animate'

我试图理解为什么我总是收到此错误。

class Cars{
     constructor(carTag){
    //sets up the local variables for the constructor function
         this.carTag = new Image()
         this.carTag.src = carTag
         document.getElementById("gameboard").innerHTML = 
         this.carTag
     }

     animate() {
         const image = this.carTag;
         const animate = this.animate;
         let throttle = 2000;
         const canvas = document.getElementById("gameboard");
         const ctx = canvas.getContext("2d");
         let x = canvas.width;
         let y = 0;
         setTimeout (function(){
             ctx.clearRect(0, 0, canvas.width, canvas.height);  
             ctx.drawImage(image, x, y);                    
             x -=4;
             requestAnimationFrame(animate);
       }, 1000/throttle);
    }
}

 car1 = new Cars("http://i.stack.imgur.com/Rk0DW.png");
 car1.animate();

感谢您的帮助！

更新：该错误是由于 requestAnimationFrame（animate）;

我试图弄清楚为什么无法通过该循环传递图像。

感谢您的所有帮助。我真的很感激。

Answer 1

在动画函数内部，这是指动画函数本身，而不是它所属的对象。在类定义中，您可以说“ var self = this;”。并在动画函数中使用self.carTag。不过，在animate的定义中使用self.animate可能仍然有问题。

Answer 2

class Cars{
    constructor(carTag){
        //sets up the local variables for the constructor function
        this.carTag = carTag
    }
    ...
}

进行此更改，它将起作用。您的 carTag 是 imgTag

----------------------------------编辑------------ -------------------------------

图像传递正确

首先，图像已经在窗口对象中，因此它已经是全局的

    
    class Cars{
        constructor(carTag){
            //sets up the local variables for the constructor function
            this.carTag = new Image()
            this.carTag.src = carTag
            document.getElementById('abcd').innerHTML = this.carTag
        }
    
        animate() {
            const image = this.carTag;
            const animate = this.animate;
            let throttle = 2000;
            setTimeout (function(){
                ctx.clearRect(0, 0, canvas.width, canvas.height);  
                ctx.drawImage(image, x, y);                    
                x -=4;
                requestAnimationFrame(animate);
          }, 1000/throttle);
        }
    }
    
    car1 = new Cars("http://i.stack.imgur.com/Rk0DW.png")

this.carTag是图像对象。希望这会有所帮助。

类型错误：无法读取方法的null的属性变量

2 个答案: