JS eventlistener로 호출된 객체의 메소드에서 멤버변수에 접근하기

배경

아래 코드와 같이, 이벤트리스너로 어떤 객체의 메소드를 호출하여 멤버변수에 변화를 주고자 한다.
그런데 assign에서 호출하는 this.num이 undefined이다. 즉, 자기 객체의 멤버를 못읽어오고 있는 것이다.

let obj = {
  num : 0,

  assign : function (e){
    num = 20;
    console.log('assign : '+this.num);
  }

};

document.addEventListener('keydown',obj.assign);

문제

여기 이 글이 오래된 글이긴 하지만, 명확한 답을 제시하고 있다.

아래 코드의 마지막줄에서 리스너로서 호출된 ojb.assign_two에서 접근하는 this.num은 obj.num이 아니다.

let obj = {
  num : 0,

  assign_one : function (){
    num = 10;
    console.log('assign_one : '+this.num);
  },
  assign_two : function (e){
    num = 20;
    console.log('assign_two : '+this.num);
  }
};
// 초기값인 0 출력
console.log(obj.num);
// 10출력
obj.assign_one();
// undefined 출력
document.addEventListener('keydown',obj.assign_two);

해결

본인은 단순히 한 단계를 더 걸쳐 호출하는 방법으로 해결했다.
다른 이름없는함수로 이벤트를 받고, 이 이름없는 함수에서 본래 호출하고자 하는 assign_two를 호출한다.

let obj = {

  ...

  assign_two : function (){
    num = 20;
    console.log('assign_two : '+this.num);
  }
};

document.addEventListener('keydown',function (e){
    obj.assign_two();
});

위에 링크걸어놓은 stackoverflow에서는 다른 방법을 써놓았다.
'문제'단락의 코드를 그대로 두고, assign_two함수 내부에서 self.num 로 접근하거나 (this.num 대신),
addEventListener구문에서 리스너에 대해 bind를 사용하라고 한다.