자바 스크립트 형식 문제 : Uncaught TypeError : Object 0에 'draw'메서드가 없습니다.

Question

JS + 캔버스로 실험하기 만하면 벽을 치는 것처럼 보입니다. 최소 응용 프로그램의 "목표"는 캔버스의 임의의 위치에서 클릭하고 그리기 버튼을 누른 다음 클릭 한 위치에서 사각형을 그립니다.

OO 백그라운드에서 오는 ... 나는 (내가 사용하려고하는) OO를 사용하지 않습니다. js에서는 완전히 이해하지 않습니다.

는하지만, 기본적으로 내가 배열에 사용자가 클릭 할 때마다 추가

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+")"; 
} 

여기에 사각형을 그려야 할 곳이 있습니다. 내가 유사한 오류가 그 객체의 변수에 액세스하려고 얻을

Uncaught TypeError: Object 0 has no method 'draw' 

:

function renderStack() { 

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

} 

는이 오류입니다. 목록에 추가 한 후 js는 어떤 유형인지 잊었습니까? 배열을 인쇄 할 때 [Object object]로 가득 차 있기 때문에

감사합니다.

Answer 1

for(var o in list) 

o 배열의 인덱스 (또는 속성)이다. 해당 색인에 저장된 내용에 액세스하려면 list[o]을 입력하십시오.

그러나 배열의 경우, for-in보다 Alnitak에 표시된 것처럼 for 루프를 사용하는 것이 더 좋습니다.

업데이트 : 당신은 모든 속성을 반복 필요할 때

를 들어-에 사용됩니다. array는 객체이므로 인덱스와 속성을가집니다. 따라서 for-in은 모든 인덱스와 속성을 반복합니다. for-in은 객체를 위해 더 좋습니다.

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

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

Answer 2

for ... in ... 당신에게 객체의 키 아니라 그 내용을 제공합니다.

그래서 배열에 당신은 인덱스 저장된 요소의과 이름을 다른 열거 속성의을 모두 받게됩니다.

대신 사용해야합니다

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