JavaScript - 原型方法未定义

Question

I just can't figure out why my draw function is undefined. It has something to do with the prototype. Essentially, I would like each new object created to have its own x, y, dx and dy so that I can create multiple bouncing balls using objects, and I figured using prototypes to create methods for each object would be a valid way.

document.addEventListener("DOMContentLoaded", function(event){
var canvas,
    context,
    altezza,
    larghezza,
    x = 100,
    y = 100,
    raggio = 25,
    dx = 5,
    dy = 5,
    immagine,
    ballTest;

    window.onload = init;

    //Assegniamo a canvas l'elemento HTML canvas 
    canvas = document.getElementById("campo");
    //Assegniamo a context un oggetto che contiene tutti i metodi per disegnare
    context = canvas.getContext("2d");
    //Assegniamo a "dy" una velocità iniziale di 0.1 che verrà incrementato nel tempo
    dy = 0.1;
    //Assegniamo a immagine l'immagine della sfera
    immagine = new Image;
    immagine.src = "tBall.png";
    //Assegniamo alle variabli altezza e larghezza le dimensioni del campo
    larghezza = window.screen.availWidth - 40;
    altezza = window.screen.availHeight - 120;

    function Entity(x, y, raggio){
        this.x = x;
        this.y = y;
        this.raggio = raggio;
        draw();
    }

    Entity.prototype.draw = function(){
        context.clearRect(0, 0, context.canvas.width, context.canvas,length);
        context.drawImage(immagine, x, y, raggio, raggio);
    };

    //MIGHT NEED TO PUT THIS.X AND THIS.Y
    Entity.prototype.move = function(dx, dy){
        if(this.x < -10 || this.x > larghezza - 20){
            dx *= -1;
        }
        if(this.y < 20 || this.y > altezza - 40){
            dy *= -1;
        }

        this.x += dx;
        this.y += dy;
    };

    function init(){
        //Assegniamo a canvas l'elemento HTML canvas 
        canvas = document.getElementById("campo");
        //Assegniamo a context un oggetto che contiene tutti i metodi per disegnare
        context = canvas.getContext("2d");
        //Settiamo le dimensioni del campo di canvas
        context.canvas.width = larghezza;
        context.canvas.height = altezza;
        //Inizializziamo l'entità
        ballTest = new Entity(100, 100, 25);
        setInterval(ballTest.move.bind(dx, dy), 10);
    }
});

ERROR : Uncaught ReferenceError: draw is not defined

Answer 1

The draw function is in the prototype of Entity so inside the Entity class you have to access it as this.draw() .

function Entity(x, y, raggio){
        this.x = x;
        this.y = y;
        this.raggio = raggio;
        this.draw();
    }