2016-12-15 4 views
0

일부 범위 문제를 해결하는 데 어려움이 있습니다. 나는클래스 메서드를 사용하여 HTML5 Canvas에 그리기 : 범위 문제 (JS, ES6)

class User { 
    constructor(user, x, y, ctx) { 
    for (let metric in user) { this[metric] = user[metric]; } 
    this.initialX = x; 
    this.initialY = y; 
    this.x = x; 
    this.y = y; 
    this.ctx = ctx; 
    this.draw(this.initialX, this.initialY, this.ctx); 
    } 

    draw(x, y, ctx) { 
    ctx.fillStyle = 'white'; 
    ctx.fillRect(x,y,20,20); 
    } 

    move(e) { 
    //// stuff about motion goes here 
    console.log(e.key, this.ctx); //// can't access `ctx` - the user key shows up in the console but the context is nowhere to be seen 
    //// eventually this needs to be draw(x, y, ctx) that's passed back up to the draw function 
    } 

} 

컨텍스트가 전달됩니다 ... 캔버스에 사각형을 그리는 클래스 메소드를 사용하고 다른 클래스 메소드를 사용하여 주위를 이동하고 싶지만, 내가 컨텍스트를 전달할 수없는 것 표시된 코드에서 더 아래로 코드에서 in this pen하지만 사용자 클래스에 전달되는 방식으로 말할 수있는 한 문제가되지 않습니다, 그것은 내가 이동 기능에서 액세스하는 방법입니다.

나는 또한 this과 무관 한 생성자 함수에서 컨텍스트에 대한 변수를 정의하려고했지만 그 중 하나는 성공적이지 못했습니다.

답변

3

메서드를 바인딩해야합니다. 나는 당신을 가지고,

this.move = this.move.bind(this); 
+0

오, 좋아,이 정확히 내가 무엇을 찾고 있었는지. 정말 고맙습니다! – JSilv

1

이벤트 수신기 함수에 4 개의 인수 (e, x, y, ctx)이 필요하지만 리스너는 only one argument 이벤트를 수신합니다.

귀하는 모든 인수를 사용하기 위해 명시 적으로 모든 인수를 처리기에 전달하거나 처리기에 액세스하는 다른 방법을 찾아야합니다.

+0

아 : 당신의 생성자에서 ES6 classes doesn't do that automatically.

이 줄을 추가하려고합니다. 감사!!! – JSilv