메소드에서 JS 객체 리터럴에 대해 누락 된 것이 있습니까?

이 예제에서는 캔버스의 움직이는 블록 인 메서드가있는 간단한 개체 리터럴을 만들려고합니다. 그것은 내가 무승부() 함수에서 무승부 방법에 이제 코드를 작성하면되지만 나는 그것이 이런 식으로 작동하지 않습니다 어떤 이유로 http://www.html5rocks.com 메소드에서 JS 객체 리터럴에 대해 누락 된 것이 있습니까?

var block = { 
    color: "#000000", 
    x: 0, 
    y: 0, 
    width: 30, 
    height: 30, 
    draw: function() { 
     ctx.fillStyle = this.color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
}; 

function update() { 
    block.x = block.x + 30; 
    block.y = block.y + 30; 
} 

function draw() { 
    var x = document.getElementById("space"); 
    var ctx = x.getContext("2d"); 

    ctx.clearRect(0, 0, 900, 600); 

    block.draw(); 
}

에서 튜토리얼을 사용하여 다음 코드 조각을 썼다. 아마 뭔가 빠졌을거야,하지만?

출처

2014-04-28 user3581784

가 어떻게하면이 "CTX"변수에 도착하기로되어 코드입니다 그것을 매개 변수로 전달하지 않습니까? – Pointy

자바 스크립트가 작동하지 않을 때 항상 콘솔을보십시오. 아마도 유용한 오류가있을 것입니다. @Pointy는 잘못된 점을 알려주기 위해 언제나 근처에있는 것은 아닙니다. –

block 및 그 구성원은 기능에 국한된 ctx을 들어 본 적이 없습니다.

어느

은 글로벌하게, 또는 block.draw에 전달할 : 메소드가 선언 될 때

var block = { 
    // ... 

    draw: function(ctx) { 
    // ... 
    } 
}; 

// ... 

block.draw(ctx);

출처

2014-04-28 15:13:31

'block'은 객체이고 "범위"의 개념조차 모릅니다. 함수는 "변수에 대해 들어봤을"수 있습니다. – Bergi

대담하게 사교적 인 사과에 대한 사과. 나는 분명히 역사상 최악의 괴물이다. –

ctx는 알려져 있지 않다. 메서드가 클로우즈를 작성해, ctx의 값을 가지고 있지 않다. 스코프는 함수 정의가 아닌 함수 정의에 정의되기 때문에 범위가 정확하게 동적 인 것은 아닙니다 (참조와 관련하여).

를 해결하는 방법 : 메서드에 매개 변수로 ctx에 합격하거나, 할당 가능한 속성으로 (그리고 this.ctx를 참조하는 방법을 수정할)

출처

2014-04-28 15:13:42

메소드에서 JS 객체 리터럴에 대해 누락 된 것이 있습니까?

답변

관련 문제