javascript 类型问题：未捕获的类型错误：对象 0 没有方法“绘制”

Question

只是在尝试 JS + canvas，我似乎碰壁了。 我的最小应用程序的“目标”是单​​击画布上的任何随机位置，按下绘图按钮并在您单击的位置绘制正方形。

来自 OO 背景...我（尝试）使用 OO，在 js 中我没有完全掌握。

但基本上我有一个自定义 Square 对象

function Square(l, w, x, y) {

    this.length = l;
    this.width  = w;
    this.posx   = x - l/2;
    this.posy   = y - w/2;

    //test
    //ctx.fillStyle = "rgb(20,0,0)";
    //ctx.fillRect(this.posx,this.posy,this.length,this.width);


    this.draw = function() {

        ctx.fillStyle = "rgb(20,0,0)";
        ctx.fillRect(this.posx,this.posy,this.length,this.width);

    }
}

每次用户单击时我都会添加到数组中... 这是我单击画布时的事件处理程序。

function addTo(evt) {

    pos = getMousePos(evt);
    var sq = new Square(50, 50, pos.x, pos.y);
    list.push(sq);

    output.innerText = "("+sq.posx+","+sq.posy+")";
}

这是我（尝试）绘制正方形的地方。

function renderStack() {

    //alert(list);
    canvas.width = canvas.width;
    for(var o in list) o.draw();

}

这是错误：

Uncaught TypeError: Object 0 has no method 'draw'

我在尝试访问该对象的变量时遇到了类似的错误。 似乎在我将它们添加到列表中之后，js 忘记了它们是什么类型？ - 因为当我打印数组时，它充满了 [Object object] 的

谢谢。

Answer 1

for ... in ... 给你一个对象的键，而不是它的内容。

因此，在数组上，您将同时收到存储元素的索引和任何其他可枚举属性的名称。

相反，您应该使用：

for (var i = 0; i < list.length; ++i) {
     list[i].draw();
}

Answer 2

for(var o in list)

o 是数组的索引（或属性）。您将通过list[o] 访问该索引中存储的内容。

但是对于数组，最好使用 Alnitak 所示的 for 循环而不是 for-in。

更新：

当您需要遍历所有属性时，将使用 For-in。由于数组是一个对象，它具有索引和属性。因此 for-in 将遍历所有索引和属性。 for-in 更适合对象。

例如

var obj = { p1: 1, p2: 2};

for(var prop in obj) {
   //...
}