ES6 클래스 : 프로토 타입 메서드로 함수 반환 설정

Question

윈도우 스크롤 이벤트에 이벤트 리스너가 필요하다고 가정하고이 리스너를 ES6 클래스의 프로토 타입에 대한 메서드로 저장하려고합니다. 그것은 간단합니다. 그러나 나는 또한 핸들러의 실행 횟수를 줄이기 위해 debounce 함수가 필요하다 (예를 들어 lodash에서 _.debounce()). 그래서 리스너로 사용하기 위해 _.debounce()가 반환하는 메서드에 대한 참조가 필요하므로 필요할 때 바인딩하고 바인딩 해제 할 수 있습니다. ES6 클래스로이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 요점은 : 식의 결과를 ES6 구문을 사용하여 프로토 타입 메서드로 설정할 수 있습니까?

class MyClass { 

    constructor() { 
     this.prop1 = 0; 
     window.addEventListener('scroll', this.myListener.bind(this)); 
    } 

    // Is it possible? 
    myListener = _.debounce(() => { 
     this.prop1 = 1; 
    }, 200); 

} 

Answer 1

당신은 인스턴스의 속성으로 바인딩 및 디 바운스 기능을 저장해야합니다

class MyClass { 
    constructor() { 
     this.prop1 = 0; 
     this.boundListener = _.debounce(this.myListener.bind(this), 200); 
     window.addEventListener('scroll', this.boundListener); 
    } 
    myListener() { 
     this.prop1 = 1; 
    } 
    something() { // called later 
     window.removeEventListener('scroll', this.boundListener); 
    } 
} 

당신은 그렇지 않으면 알 수 없습니다, 바인딩 및 인스턴스 당 방법 진동을 소거해야합니다 어느 객체가 this.prop1을 가리키고, 디 바운싱 (debouncing)은 다른 인스턴스를 방해 할 것입니다. 프로토 타입에서는이 작업을 수행 할 수 없습니다. 그러나 프로토 타입을 완전히 생략 할 수 있습니다.

class MyClass { 
    constructor() { 
     this.prop1 = 0; 
     this.myListener = _.debounce(() => { 
      this.prop1 = 1; 
     }, 200); 
     window.addEventListener('scroll', this.myListener); 
    } 
    something() { // called later 
     window.removeEventListener('scroll', this.myListener); 
    } 
}