https://yuddomack.tistory.com/entry/자바스크립트-this의-4가지-동작-방식

이번 글에서는 자바스크립트 this가 어떻게 동작하는지 알아보겠습니다.

프로토타입을 먼저 쓸지, this를 먼저 쓸지 고민했는데 아무래도 this가 좀 더 쉬울 것 같네요

1. 오해

흔히(java에서) 클래스 내에서 사용하는 this 문법은 클래스(자세히는 인스턴스화 된 객체) 자기 자신을 뜻합니다.

javascript에서도 this문법이 존재하는데, 하필 'java' script라는 비슷한 이름에, this가 존재하니 클래스 내 this처럼 동작을 할 것 같은 오해를 불러일으킵니다.

(자바 안쓴지 너무 오래되서 용어 혼란이 있을 수 있습니다. 잘못된 부분은 댓글로 남겨주세요!)

물론 javascript에서 function과 this 문법, new 키워드를 사용해서 '클래스와 객체 생성' 형태를 묘사(다음 글에 얘기할 prototype과 연관되는 구현입니다)할 수 있지만, javascript의 this는 더 다양한(통상 네가지) 방법으로 사용될 수 있습니다.

여담으로 you don't know js의 저자 카일 심슨님은 책을 통해서 'javascript에서 클래스처럼 보이는 구문은 개발자들이 클래스 디자인 패턴으로 코딩할 수 있도록 자바스크립트 체계를 억지로 고친 것'이라고 말했습니다.

(또한 클래스 패턴에 익숙해진 우리들에게 js를 js 답게 사용할 수 있는 방법에 대해서 많은 이야기를 했습니다.)

저도 이러한 철학에 공감하며, 굳이 oop 사상에 맞추기보다 js를 js답게 쓸 수 있도록 시도하는 편 입니다.

(얕은 예지만 react에서 클래스형 컴포넌트보다 함수형 컴포넌트를 지향하고, class extends 같은 상속보다는 object에 작동 위임하는 방식으로 사용하는 등)

잠시 딴길로 샜지만 this를 잘 이해하면 재밌고 다양하게 js 프로그래밍을 하는데 도움이 될 것입니다.

2. this에 대한 선행 정보

this는 객체와 연관이 깊습니다.

예를들어 var a = {name: "yuddomack"}이라는 객체가 있고, 특정 상황을 만족할 경우 this.name을 호출하면 "yuddomack"이 출력되는 것이죠.

미리 언지를 드리자면 변수 a를 this의 콘텍스트(context) 객체라고 할 수 있습니다.

아래부터 콘텍스트라는 단어를 사용할텐데, this가 바라보고 있는 어떤 객체 정도로 상상하시면 이해하기 수월할 것 같습니다.