xxx ist keine Funktion innerhalb eines für

Question

den Fehler: Menu.js: 31 Uncaught Typeerror: bubble.render keine Funktion

wird es in diesem Code geschieht:

function Menu() { 
    this.bubbles = []; 
    this.bubbles.push(new MenuBubble("Etudiants",FSMEnum.ETUDIANTS)); 
    this.bubbles.push(new MenuBubble("Sujets",FSMEnum.SUJETS)); 
    this.bubbles.push(new MenuBubble("Valider",FSMEnum.VALIDATE)); 
    this.bubbles.push(new MenuBubble("Choix",FSMEnum.MATCH)); 

    this.render = function(x,y,w,h) { 
     ctx.fillStyle = '#555555'; 
     ctx.fillRect(x, y, w, h); 

     var i=0; 
     for(bubble in this.bubbles) 
     { 
      bubble.render(x+(w/2), y+((h/6)*(i+1))); // Here's the error 1 
      i++; 
     } 
    }; 

    this.getBubbles = function() { 
     return this.bubbles; 
    }; 

} 

und dieses ein:

function MenuBubble(name,state) { 

    this.name = name; 
    this.state = state; 

    this.render = function(x,y) { 

     ctx.beginPath(); 
     ctx.arc(x, y, 30, 0, 2 * Math.PI, false); 
     ctx.fillStyle = 'green'; 
     ctx.fill(); 
     ctx.lineWidth = 5; 
     ctx.strokeStyle = '#003300'; 
     ctx.stroke(); 
     ctx.closePath(); 


    }; 


    this.clicked = function() { 
     FSM.state = this.state; 
    }; 


} 

die beiden Teile des Codes sind oben in verschiedenen Dateien, die in der richtigen Reihenfolge (MenuBubble und dann Menü) enthalten sind.

Diese 2 Codes werden innerhalb einer Hauptleitung ausgeführt, was kein Problem darstellt.

Im Haupt i Code ausführen kann wie:

Menu.getBubbles().forEach(function(element) { 
     if (true) { 
      alert('clicked a bubble'); 
      this.clicked(); // Here's the error 2 
     } 
    }); 

Es läuft perfekt, aber keine Funktionen aus der Blase aus irgendwelchen Gründen fordern.

Edit: zu klären, ich meinte, dass die Warnung zeigte (wenn das angeklickt, was kommentiert wird, zeigt es 4 mal, wie ich 4 Blasen in meinem Menü instanziiert haben)

Im zweiten Fall ruft this.clicked() oder einfach angeklickt() funktioniert in keiner Weise.

Gibt es etwas, das ich mit Objektmethoden vermisse?

main.js: http://pastebin.com/BmTiDbFD

Index.HTML: http://pastebin.com/CfmYu5eJ

Answer 1

Diese Zeile:

for(bubble in this.bubbles) 

zu tun, ist nicht das, was Sie denken, es ist. Für jede Schleife in JS durchlaufen Indizes, keine Elemente.

for(index in this.bubbles) { 
    var bubble = this.bubbles[index]; 
    ... 

ist, was Sie wollen

Answer 2

Vielleicht deshalb, bubble nur der Index.

UPDATE: Indizes sind Zahlen, i oder bubble ist nicht der Index. Weil für/in Eigenschaften aufzählt, nicht auf Indizes. So wird typeof istring, aber nicht number

Answer 3

Für die ‚this.clicked() Szenario:

ersetzen 'this.clicked()' mit 'element.clicked()'

Answer 4

Erstellen Sie eine Variable Referenz this, substituieren for..of Schleife für for..in loop

function Menu() { 
 
    this.bubbles = []; 
 
    this.bubbles.push(10); 
 
    this.bubbles.push(20); 
 
    this.bubbles.push(30); 
 
    this.bubbles.push(40); 
 
    var that = this; 
 
    this.render = function(prop) { 
 
     console.log(prop || "first call") 
 
     for(bubble of this.bubbles) 
 
     { 
 
      console.log(bubble); // Here's the error 1 
 
     } 
 
    }; 
 

 
    this.getBubbles = function() { 
 
     return this.bubbles; 
 
    }; 
 

 
} 
 

 
var g = new Menu(); 
 
g.render()