ES6의 클래스에서 변수를 가져 오는 방법은 무엇입니까?

Question

안녕하세요, KeyCodeClass 밖으로 변수를 가져 오지 않습니다. 여기에 내가 tryed 것입니다 : 1

class KeyCodeClass1 { 
    constructor() { 
     this.space; 
    } 
    KeyDown(e) { 
     if (e.keyCode == 32) { this.space = true } 
    } 
    KeyUp(e) { 
     if (e.keyCode == 32) { this.space = false } 
    } 
} 

var KeyCode1 = new KeyCodeClass1(); 
window.addEventListener("keydown", KeyCode1.KeyDown, false); 
window.addEventListener("keyup", KeyCode1.KeyUp, false); 

setInterval(loop1,10); 

function loop1() { 
    console.log(KeyCode1.space); 
} 

가 지금은 정의되지 않은 내 콘솔에서 얻을 TEST. 따라서 스페이스 바를 누를 경우 e.keyCode == 32과 같은 것은 정의되지 않은 스테이가 인쇄됩니다. 우리가 fuction를의 값을 반환한다면 우리는 이것을 무엇을 얻을 : TEST 그래서 여전히 2

class KeyCodeClass2 { 
    constructor() { 
     this.space; 
    } 
    KeyDown(e) { 
     if (e.keyCode == 32) { this.space = true } 
    } 
    KeyUp(e) { 
     if (e.keyCode == 32) { this.space = false } 
    } 
    Space() { 
     return this.space; 
    } 
} 

var KeyCode2 = new KeyCodeClass2(); 
window.addEventListener("keydown", KeyCode2.KeyDown, false); 
window.addEventListener("keyup", KeyCode2.KeyUp, false); 

setInterval(loop2,10); 

function loop2() { 
    console.log(KeyCode2.Space()); 
} 

콘솔에서 정의되지 않은. 내가 생성자에서 true 또는 false와 this.space 정의 않은 3 테스트 : TEST 3

constructor() { 
    this.space = false; 
} 

그럼 우리는 콘솔에서 false를 얻을. 그러나 스페이스 바를 누를 때 true으로 가지 않습니다.

그래서 클래스의 함수가 작동하는지 궁금해하기 시작했습니다. 여기 그들이 잘 작동하는지 증명 : 내가 왜이 일을하고 4

class KeyCodeClass4 { 
    constructor() { 
     this.space = false; 
    } 
    KeyDown(e) { 
     if (e.keyCode == 32) { 
      KeyCodeClass.space = true; 
      console.log("space Down"); 
     } 
    } 
    KeyUp(e) { 
     if (e.keyCode == 32) { 
      KeyCodeClass.space = false; 
      console.log("space Up"); 
     } 
    } 
} 

var KeyCode4 = new KeyCodeClass4(); 
window.addEventListener("keydown", KeyCode4.KeyDown, false); 
window.addEventListener("keyup", KeyCode4.KeyUp, false); 

TEST? 내 코드를 더 읽기 쉽고 이해하기 쉽게 만드는 것입니다. 이 문제를 도와주세요.

Answer 1

this 컨텍스트가 손실되는 것 같아서 청취자가 실행될 때 this이 클래스 인스턴스를 가리 키지 않고 window 개체를 가리키고 있습니다. 내가 수행하려고 할 것 :

var KeyCode = new KeyCodeClass2(); 
window.addEventListener("keydown", KeyCode.KeyDown.bind(KeyCode), false); 
window.addEventListener("keyup", KeyCode.KeyUp.bind(KeyCode), false); 

가 당신이