제가 질문이 너무 많네요ㅠ self에 대해서 질문 할게요

Question

제가 지금 한 여섯번 정도 들어봐도 이해가 잘 안가서요... this를 여기서 self로 바꿔준 이유가 window를 객체로 삼았기 때문에 협소하게 만들어서 init안에서 활동하도록 self로 지정해준 거잖아요? 그래서  const self = this ; 로 지정하고 init안에서는 this대신에 init으로 썼다는 건 이해가 가는데, 갑자기 run에서는 이것조차 지워버리고 객체 안에 self를 넣는 순간부터 설명이 좀 이해가 안가서요ㅠ 잘 따라가다가 마지막에 run : function ( self ) { if ( self . direction == 'left' ) { self . xPos -= self . speed ; } else if ( self . direction == 'right' ) { self . xPos += self . speed ; } //실제로 움직이게 만들어주려면 left값을 계속 갱신해줘야 하니까 이걸 넣는다. self . mainElem . style . left = self . xPos + '%' ; // 반복시켜줘야하니까 쓰는 것 method를 호출. (context가 바뀐 것) requestAnimationFrame ( function () { self . run ( self ); }) } 왜 self가 들어가야하는건지, 위에 keydown event에서는 왜 또 self를 넣어야 이게 작동되는건지.. 혹시 ㅜㅜ 좀 더 깔끔한 설명 가능할까요? 아니면 앞 강의 중 어떤 걸 들어야 이게 좀 더 명확하게 다가올까요. 사실 this를 이해하는 것도 좀 오래걸리긴했는데 여기서 완전 멘붕이 오네요ㅠ

1분코딩 · Answer

requestAnimationFrame 안에서 호출하기때문에 특수한 상황이 발생한건데요,
requestAnimationFrame에 인자로 넘어간 함수 안에서는 this 자체가 전역객체(window)가 되기 때문에,
run 함수에서의 this는 더이상 character 객체로 사용할 수 없기 때문에 const self = this;는 필요가 없어져서 삭제를 한거랍니다.
this를 사용할 상황은 못되고, this를 대신해서 character 객체를 가리키고 있는 변수가 필요한 상황인데
keydown 이벤트 핸들러 내부의 self가 있으므로 그걸 그대로 run 에서도 사용하기 위해 run 메서드 안에서 self를 명시적으로 이용할 수 있도록 self.run(self) 이렇게 직접 넣어서 호출해준 것입니다.
사실 이게 쉽게 이해될 수 있는 개념은 아니라고 생각되서.. 이해하기가 쉽지 않으셨을거에요^^;
"우리의 의도와 다르게 바뀌어버린 this 대신 다른 변수(self)를 사용해야 하는데, 그 변수를 활용하기 위해 다른 메서드의 self를 가져와서 쓴다- 그러기 위해 self를 사용할 메서드의 인자로 self를 넣어준다."
이렇게 정리할 수 있겠습니다.