class MsDown{
        constructor(elmt=document){
            this.tgt=elmt
            this.upp=this.up.bind(this)
            this.xpot
        }
        msd(){
               //마우스 다운
            this.tgt.addEventListener('mousedown',this.getinfo.bind(this));
        }
        getinfo(e){
            this.xpot=e.clientX;
            this.tgt.addEventListener('mouseup',this.upp)
        }
        up(){
            //이벤트 제거
            this.tgt.removeEventListener('mousedown',this.getinfo)        
        }
    }

    class MsDrag extends MsDown{
        constructor(elmt){
            super(elmt)
        }
        std(){
            this.msd()
        }
        getinfo(e){
            super.getinfo(e)
             this.tgt.addEventListener('mousemove', this.mov) 
            //마우스 무브 이벤트
            console.log('부모클래스에 있는 this.xpot 변수가 호출됨='+this.xpot)
        }
        mov(){
            console.log("this.xpot값은="+this.xpot)
             // 만약에 MsDrag.getinfo 메서드에서 마우스 무브 이벤트 리스너
            // 콜백 인자에  bind를 사용하지 않을경우 this.xpot 값은 undefine  
        }
        up(){
            super.up()
       //이벤트 제거
            this.tgt.removeEventListener('mousemove', this.mov)
        }
    }
    var mov=new MsDrag()
    mov.std()

마우스 드래그를 클래스를 만들어서 사용할려고 합니다 그런데 유도클래스인 MsDrag 의 멤버 메소드 getinfo()에서 마우스 무브 이벤트가 말썽입니다

MsDrag getinfo() 에서 마우스 무브 이벤트 리스너에 콜백 인자로 bind를 사용할 경우 이벤트 제거는 안되는데
MsDrag.mov 메소드에서 부모 클래스 멤버변수인 this.xpot 값은 사용 할수있습니다.

반대로 bind를 사용하지 않으면 이벤트는 제거가 되는데 this.xpot 값은 undefine이 됩니다..

이거 어떻게 해야 되나요