사용하여 객체의 기능을 사용할 수 없습니다이

Question

다음은 내 객체의 EventListener를 추가 할 때 내 코드입니다 :

this.canvas.addEventListener('mousemove', function (e) { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - canv.getBoundingClientRect().left);//Look at canv 
    myGameArea.y = (e.clientY - canv.getBoundingClientRect().top);//Look at canv 
}); 

그것은 작동하지만 난 후 내 캔버스 요소를 발견하고에서 getElementById를 사용하는 경우에만 사용 canv 나의 필요를 채워줍니다. 하지만 난이 할 경우 : 전혀

this.canvas.addEventListener('mousemove', function (e) { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

그런 myGameArea 나던 변화를 내 디버거이 말한다 : "catch되지 않은 형식 오류를 :. HTMLCanvasElement에서 정의되지 않은 재산 'getBoundingClientRect'을 읽을 수 없습니다". 이 코드 부분 전에 캔버스를 객체에 선언했으며 this.canvas를 다른 많은 함수에 사용했습니다. 그럼 내 문제는 어디 있니?

Answer 1

을의 this 키워드의 값은 어디에 기능은 액세스하는에 의존하지 않는다 그것은 from이 정의되었지만 그것이 어떻게 호출되는지 정의합니다. 귀하의 경우 처리기에서 this을 덮어 씁니다. 여기

var that = this; 
this.canvas.addEventListener('mousemove', function (e) { 
    myGameArea.x = (e.clientX - that.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - that.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

우리가 명시 적으로 우리가 접근 할 개체를 명시하고, 따라서 모든 this를 사용할 필요가 없습니다 : 빠른 해결 방법은 다음과 같이 될 것이다. 그러나 이는 모범 사례로 간주되지 않습니다. 당신이 ES6를 사용하는 경우, 지방 화살표 표기법 (() => {})을 사용 자체를 작성하지 않는

this.canvas.addEventListener('mousemove', function (e) { 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}.bind(this)); 

또는 중첩 된 범위를 처리하기 위해 권장되는 방법은 bind에 원하는 컨텍스트 기능입니다 핸들러에 대한 상황 : 콜백 폐쇄 내

this.canvas.addEventListener('mousemove', (e) => { 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

Answer 2

addEventListener의 콜백 함수에서 this은 더 이상 콜백 외부와 동일한 값이 아닙니다. 같은 this 값으로 결합하고자하는 경우 중 하나 .bind(this) 또는 사용 화살표 FUNC 사용할 수 있습니다 : 일반 변수와는 달리

this.canvas.addEventListener('mousemove', function (e) { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}.bind(this)); 

this.canvas.addEventListener('mousemove', (e) => { 
    var canv = document.getElementById("some"); 
    myGameArea.x = (e.clientX - this.canvas.getBoundingClientRect().left);//Look at this.canvas 
    myGameArea.y = (e.clientY - this.canvas.getBoundingClientRect().top);//Look at this.canvas 
}); 

Answer 3

는 this의 컨텍스트 캔버스 요소 자체입니다. 따라서 this을 사용하여 캔버스를 참조하십시오.

this.canvas.addEventListener('mousemove', function (e) { 
    myGameArea.x = (e.clientX - this.getBoundingClientRect().left); 
    myGameArea.y = (e.clientY - this.getBoundingClientRect().top); 
});