Javascript를 공부하면서 this를 마주했을때 꽤나 큰 멘붕(?)이 왔다. Java를 먼저 공부해서 그런지 Javascript의 this를 이해하는데 굉장한 어려움을 겪었다. (Java의 this도 잘 이해못할지도..?)
혼자 예제를 만들어내고 공부를 하던 중 기록으로 남기고 싶어 포스팅하게 되었다.

---

Javascript의 this

Javascript의 this가 사용될수 있는 경우는 아래와 같이 굉장히 다양하다.

• 일반함수에서의 this
• 화살표 함수에서의 this
• 생성자에서의 this
• 이벤트 핸들러에서의 this
  등등등 ...

이 중에서도 일반함수에서의 this와 화살표함수에서의 this를 중점적으로 다루어보자

함수 내에서의 this는 딱 두가지만 기억하면 될 것같다.

• 일반함수 this : 자신을 호출한 객체를 가리킴
• 화살표함수 this : 자신을 호출한 객체를 한단계 무시하고 상위 객체를 가리킴

예제코드

let name = '전역';
let a = {
    name: '지역',
    age: 100,
    play() {
        console.log(this == a); // 1-1
        console.log(this === a); // 1-2
        console.log(this.name); // 1-3

        let play2 = () => {
            console.log(this === a); // 1-4
            console.log(this.name); // 1-5
        };

        console.log('');
        console.log('play2 실행');
        play2();
        console.log('');
    },

    play1: () => {
        console.log(this === a); // 2-1
        console.log(name); // 2-2
    },
};

a.play();
a.play1();
console.log(name);

위 코드의 this를 모두 이해했다면 함수내에서 this는 정복한게 아닐까 라고 생각한다.
개인적으로 1-4,5 부분이 굉장히 이해하기 어려웠다.. 차례대로 알아보도록 하자

1-1, 1-2, 1-3

play()함수 내에서 this를 묻는 질문이다.
이 경우, play를 호출한 객체는 a이기 때문에 this는 a를 가리키게 된다.

• 1-1 : true
• 1-2 : true
• 1-3 : '지역'

1-4, 1-5

play2 함수는 play함수 내에서 정의된 함수이다.
즉, play 함수가 play2 함수를 호출한 격이 되는데 [ window / 전역객체 ⇒ a ⇒ play() ⇒ play2 ] 순서대로 호출한 것이다.
play2 함수는 화살표 함수로 정의되었기 때문에 자체적으로 this를 가지지 않기에 상위 객체의 this를 끌어쓰게되고, play() 함수내에서의 this와 동일한 작용을 하게되는 것이다.

• 1-4 : true
• 1-5 : '지역'

2-1, 2-2

1-4, 1-5 예제와 동일한 화살표 함수지만, 이번엔 a 객체에서 바로 호출되는 함수이다.
즉, a 객체가 play1()함수를 호출한 격이 되기에, [ window / 전역객체 ⇒ a ⇒ play1() ] 순서대로 호출한게 된다.
play1() 함수도 화살표 함수로 정의되었기에 a가 아닌 그 상위, window / 전역객체 를 가리키게 된다.

• 2-1 : false
• 2-2 : '전역'

---

this를 이해하는데 문제가 생기면 정보를 추가할 예정이다..