Typescript 개인 메서드는 "함수가 아닙니다"

Question

아마도 일부 개념을 이해하지 못했지만 stackoverflow에서 4 개의 항목을 읽은 후 "typescript의 개인 멤버"에 대한 설명서를 읽은 후에도 여전히 혼란 스럽습니다.

간단한 마우스 IO (첫 번째 타이프 스크립트 프로젝트)를 작성했습니다. 이 고장 마우스 클래스의 전체 코드입니다 : 내가 onMouseDown 및 onMouseUp 내부 this.crossBrowserButton(e)를 호출하는 데 사용

class Mouse { 
    public left: MouseKeyData = new MouseKeyData(); 
    public right: MouseKeyData = new MouseKeyData(); 
    public whell: MouseKeyData = new MouseKeyData(); 

    public x: number = 0; 
    public y: number = 0; 

    private crossBrowserButton(e: any):string { 
     switch (e.button) { 
      case 0: return 'left'; 
      case 1: return 'whell'; 
      case 2: return 'right'; 
      case 3: return 'back'; 
      case 4: return 'forward'; 
     } 
     return 'none'; 
    } 


    private onMouseDown(e: any):void { 
     let target: MouseKeyData = this.left; 
     try {console.log(this.crossBrowserButton(e))} catch (a) {console.warn(a)} finally {} 
     if(target) { 
      target.press(); 
     } 
    } 

    private onMouseUp(e: any):void { 
     let target: MouseKeyData = this.left; 
     if(target) { 
      target.release(); 
     } 
    } 

    private onMouseMove(e: any): void { 
     this.x = e.pageX; 
     this.y = e.pageY; 
    } 

    public constructor() { 
     let anchor = document.body; 

     anchor.addEventListener('mousedown', this.onMouseDown); 
     anchor.addEventListener('mouseup', this.onMouseUp); 
     anchor.addEventListener('mousemove', this.onMouseMove); 

    } 
} 

,하지만 난 단지 this.crossBrowserButton is not a function(…)을 얻었다.

this 범위를 잃어버린 것 같지만, this.left은 완벽하게 작동합니다.

미리 감사드립니다.

Answer 1

당신이 한 일과 정확히 반대되는 것처럼 들립니다. 원래 코드에서 이벤트 리스너의 실행 범위에 문제가 있습니다. 클래스의 범위에 구속되지 않으므로 실행되는 컨텍스트에서 실행됩니다.

이벤트 바인딩은 다음과 같아야합니다.

anchor.addEventListener('mousedown', this.onMouseDown.bind(this)); 
    anchor.addEventListener('mouseup', this.onMouseUp.bind(this)); 
    anchor.addEventListener('mousemove', this.onMouseMove.bind(this)); 

Answer 2

좋아, 알아 냈어 : 나는 이벤트에서 document.body에 this을 바인딩 한 다음이 방법을 사용하여 this을 가져갔습니다.

리뷰 주셔서 감사합니다. 좋은 밤 여러분!