[JS]class에서 this를 할당하는 방법

 

//https://www.inflearn.com/course/레츠기릿-자바스크립트/lecture/80516
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
//https://ko.javascript.info/class
class Test{
    constructor(){
        this.btn0 = document.getElementById('btn0');
        this.btn1 = document.getElementById('btn1');
        this.btn2 = document.getElementById('btn2');
        this.btn3 = document.getElementById('btn3');
        this.btn4 = document.getElementById('btn4');
        this.btn5 = document.getElementById('btn5');
        this.btn6 = document.getElementById('btn6');
        
        this.start();
    }//constructor
 
    start(){
        //일반 메쏘드로 원하는 결과를 받으려면 addEventListener 할 때 화살표 함수로 래핑
        this.btn0.addEventListener('click',function(e){this.asMethod(e)}); //ERROR! 
        this.btn1.addEventListener('click',this.asMethod); //button 
        this.btn2.addEventListener('click',(e)=>this.asMethod(e)); //class-Test ⭕(1)
        
        //클래스필드를 사용한 방식
        this.btn3.addEventListener('click',this.asField); //class-Test ⭕(2)
 
        //객체에 this를 넣어놓고 쓰기
        const _this = this;
        this.btn4.addEventListener('click',function(e){_this.asMethod(e)}); //class-Test ⭕(3)
        this.btn5.addEventListener('click',_this.asMethod); //button
        this.btn6.addEventListener('click',_this.asField); //class-Test //but 불필요한 중복
    }//start
 
    asMethod(e){
        console.clear();
        console.log('this는 :',this);
        console.log('클릭한건 : ',e.target);} //asMethod
        
    asField = (e)=>{
        console.clear();
        console.log('this는 :',this);
        console.log('클릭한건 : ',e.target);}//asField
 
}//class-Test

결론

1. 메소드를 쓰고 싶다면 addEventListener 같은거 할 때 화살표 함수로 래핑해라
2. 필드를 쓰면 호출할 때 깔끔하긴 하다.
3. 화살표함수를 쓰기 싫은데 메소드로 하고 싶다면 옛날방식처럼 객체에 this를 저장해놓고 그 객체를 this처럼 써라.
   
   

참고문서(1) : MDN class

Classes - JavaScript | MDN

참고문서(2) : 모던자바스크립트 튜토리얼 - 클래스 

클래스와 기본 문법