Question

错误： Menu.js：31 Uncaught TypeError：bubble.render不是函数

它发生在这段代码中：

1.0.97.1

和这一个：

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;
    };

}

上面的两位代码位于不同的文件中，这些文件包含在正确的顺序中（MenuBubble，然后是菜单）。

这两个代码在main中运行，没有问题。

在主要我可以运行如下代码：

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;
    };


}

它完美运行，但由于某些原因，它不会从气泡中调用任何函数。

编辑：澄清，我的意思是警报显示（如果被点击的东西被评论，它显示4次，因为我在我的菜单中实现了4个气泡）

在第二种情况下，调用this.clicked（）或者只是单击（）无论以哪种方式都不起作用。

对象方法是否缺少某些东西？

Main.js：http://pastebin.com/BmTiDbFD

Index.html：http://pastebin.com/CfmYu5eJ

Answer 1

也许这就是为什么，bubble只是索引。

更新：索引是数字，i或bubble不是索引。因为for / in枚举属性，而不是索引。因此typeof i将是string，而不是number

Answer 2

这一行：

for(bubble in this.bubbles)

不按照你的想法行事。对于JS中的每个循环，请通过索引而不是项目。

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

是你想要的

Answer 3

对于'this.clicked（）场景：

将'this.clicked（）'替换为'element.clicked（）'

Answer 4

创建一个变量以引用this，将for..of循环替换为for..in循环

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()

xxx不是函数，在for中

4 个答案: