Проблема с типом JavaScript: Uncaught TypeError: Объект 0 не имеет метода 'draw'

Question

Просто экспериментирую с JS + canvas и, похоже, я врезался в стену. «Цель» моего минимального приложения - щелкнуть в любом произвольном месте на холсте, нажать кнопку рисования и нарисовать квадраты там, где вы щелкнули.

исходящий из фона ОО ... я (пытался) использовать ОО, чего в 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'

Я получаю похожую ошибку при попытке получить доступ к переменным для этого объекта. Кажется, что после того, как я добавляю их в список, Дж.С. забывает, какого они типа? - потому что, когда я печатаю массив, он полон [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].

Но для массивов лучше использовать цикл for, как показано Алитаком, чем for-in.

Обновление:

For-in должен использоваться, когда вам нужно перебрать все свойства.Поскольку массив является объектом, он имеет индексы и свойства.Так что for-in будет перебирать все индексы и свойства.for-in лучше для объектов.

например

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

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