this.y 변수에 10을 추가하려고 시도했지만 NaN을 반환합니다.

Question

나는 뭔가 잘못한 것처럼 보이고 해결책을 찾지 못하는 것 같습니다. 나는 그들을 숫자로 변환하려고 시도했지만 + =를 시도했지만 NaN을 얻는다.

function circle() { 
    this.x = 60; 
    this.y = 200; 
    this.draw = function() { 
     ellipse(this.x, this.y, 20, "green"); 
    }; 


    this.move = function() { 
     $(document).keydown(function(e) { 
      // console.log(e.keyCode); 
      if (e.keyCode === 68) { 
       this.y += 1; 
       console.log(this.y); 
      } 
     }); 
    }; 

} 

변수가 아니기 때문일 수 있습니다.

감사합니다 :)

Answer 1

를 keyDown 콜백 내부 this이 기대 것이 아니다 때문이다.

해결 방법 중 하나는 외부 범위의 this을 변수로 저장하는 것입니다.

var me = this; 
me.x = 60; 
me.y = 200; 
.... 

me.y += 1; //use me istead of this. 
console.log(me.y); 

다른 방법으로는 es6 lambas를 사용할 수 있습니다. 범위를 올바르게 바인드 할 수 있기 때문입니다.

$(document).keydown(e => {//lamba instead of function 
    if (e.keyCode === 68) { 
     this.y += 1; 
     console.log(this.y); 
    } 
}); 

bind 기능을 사용하여 범위를 바인딩 할 수도 있습니다.

$(document).keydown((function(e) {//lamba instead of function 
    if (e.keyCode === 68) { 
     this.y += 1; 
     console.log(this.y); 
    } 
}).bind(this));