[JavaScript] this

이어서 바로 this 얘기를 할건데 왜 이렇게 급하게 쓰냐면 앞에 글에서는 객체지향 어쩌고 얘길 했지만, 그 객체지향 프로그래밍할 때의 this랑 이 자바스크립트에서 얘기하는 this랑 진짜 지랄맞게 다르다. 자바같은 언어에서 this를 사용하는걸 보면 진짜 명확하게 언제나 객체 자기 자신을 지칭하는 의미로만 사용하고 있는데 자바스크립트는 얘가 어떤 함수 내에 들어있다가 호출 되는지 그 방법에 따라 다르다.. 어이가 없다.. 그래서 이제 나 같은 애들이 this 좀 쓸 줄 안다고 깔짝 대다가 삽질 엄청나게 하는걸 볼 수 있는데, 이거 제대로 생각하면서 쓰면 괜찮으니까 일단 한번 알아보자. 

 

자바스크립트 함수를 호출하는 방법에 따라 달라지는 this

자바스크립트 함수는 호출하는 방법이 네가지가 있다. 

1. 그냥 함수 호출
2. 메서드로써 호출
3. 생성자 호출
4. Apply, bind, call 을 사용한 호출

이 방법들에 따라서 this가 어떤 걸 얘기하는지가 달라진다고 보면 되겠다. 

 

1) 함수 호출

우리가 사용하는 자바스크립트의 최상위 객체가 과연 무엇일까?  당신이 만약에 프론트엔드 개발자라면 window를 얘기할거고, 자바스크립트를 통해 서버를 개발하는 개발자라면 global이라고 얘기할거임. 기본적으로 일반적인 자바스크립트 함수에서 this를 사용하게 되면 이 최상위 객체를 부른다고 생각하면 된다. 위에 저 2,3,4 케이스를 제외하면 무적권 window를 얘기한다고 보면 되겠다. 

 

2) 메서드로써 호출

const obj = {
   title: "title",
   showTitle: function () {
   		console.log(this.title);
   }
   
}

객체의 안에서 만들어져 객체 내부요소를 사용하는 함수를 우리는 메서드 라고 부르기로 약속했다. 이렇게 함수를 호출하게 되면 이 함수에서 사용하는 this는 이 메서드를 품고 있는 객체를 의미한다. 

 

3) 생성자 호출

이게 이제 직전 글에서 얘기한 내용인데, 이건 인스턴스를 만들고 앉아있으니 여기서 this는 해당 인스턴스를 나타내는 this가 된다.

function User() {
   this.name = "ota"
   this.age = "12"
}

const user1 = new User();
const user2 = new User();
const user3 = new User();
const user4 = new User(); // 각자 의미하는 this 가 다르다. 인스턴스가 다르기 때문

 

4) apply, call, bind를 활용한 호출

지금까지는 this에 들어가는 애가 동적으로 왔다리갔다리 했지만, apply, call, bind 얘네를 사용하면 개발자가 직접 명시적으로 this를 지정해줄 수 있다. 얘네는 전부 prototype 이란 객체가 가지고 있는 메서드들인데, 이건 prototype 얘기도 해서 나중에 해야겠음.. 일단 명시적으로 this가 될 놈을 정해준다 정도만 기억하고 있으면 될 것 같다.