어지간하면 어떤 개념이 나오면 가능한 제대로 파악하고 넘어가려고 노력하는데, this 는 시간을 꽤 갈아 넣었는데도 아! 이정도면 내 수준에서 알 만큼 알았다. 넘어가도 괜찮겠다! 하는 느낌이 안 든다. 그래서 this 를 볼 수 있는 주요 상황과 그 상황에서 this 가 어떻게 쓰이는지를 정리하고, 지금은 넘어가려고 한다.

---

1. 개념

this 는 함수 실행 시 호출 방법에 의해 결정되는 특별한 객체이다. 함수 실행 시 결정되므로, this 는 고정되어있지 않고 실행되는 맥락(context) 에 따라 다르게 결정된다.

---

2. 주요 맥락

기초적인 수준에서 간단한 코드맥락을 구성해보고, 그 안에서 this 가 어떤 의미를 가지는지 살펴본다.

2.1 메서드

const obj = {
  func: function() {
    console.log(this)
  }
}

obj.func(); // obj

this 가 위와 같이 메서드의 맥락에서 사용된 경우, this 는 그 객체를 의미한다.
따라서 obj.func() 는 obj 를 출력하게 된다.

2.2 인스턴스

function MyInfo(name, age) {
  this.name = name;
  this.age = age;
}

const me = new MyInfo("Crom", 20);
const you = new MyInfo("neo", 25);

console.log(me.name) // "Crom"
console.log(you.name) // "neo"

생성자 함수 MyInfo 를 만들고, me 와 you 두 개의 인스턴스를 만들었다.
이 때 this 는 해당 인스턴스를 가리킨다.
즉, me 인스턴스에서 this --> MyInfo {name: "Crom", age: 20}
you 인스턴스에서 this --> MyInfo {name: "neo", age: 25}

2.3 call, apply, bind

const obj = { name: 'Crom" }

const fav = function(song) {
  console.log(`${this.name} likes ${song}`)
}

fav.call(obj, "Ultramania"); // "Crom likes Ultramania"
fav.apply(obj, ["Moai"]); // "Crom likes Moai"

const binded = fav.bind(obj)
binded("take five"); // "Crom likes take five"

1. call, apply, bind 셋 다 this 를 내가 지정하는 타겟으로 고정하는 함수이다.

2. 셋 모두 첫 번째로 입력한 인자를 this 로 고정하고, 두 번째 인자부터는 fav 함수로 전달되는 인자를 담는다. 전달할 인자가 복수인 경우 apply는 배열의 형태로 입력해야 하며, 이것이 call 과 apply 의 차이점이다.

3. call과 apply가 함수를 실행시키는 반면, bind는 함수를 실행시키지 않고 this 만 고정시킨다. 이 점이 bind가 call, apply 와 구별되는 특징에 해당한다.

4. 만일 call 등의 함수를 사용하지 않고 fav 함수를 실행시킬 경우 this 가 함수 내부에서 바인딩되지 않아 전역객체인 window 를 의미하게 된다.

2.4 일반 함수와 화살표 함수

function notBinding() {
  console.log(this)
}

notBinding(); // Window


const arrow = () => console.log(this)

arrow(); // Window

1. 일반 함수에서 this 는 내부에 바인딩되지 못하고 전역객체 Window를 의미하게 된다.

2. 화살표함수에서 사용된 this 역시 아무런 의미를 갖지 못하며, Window 를 의미하게 된다.

3. 듣기로는 위 두가지 맥락에서 this 가 사용된 경우 코드가 잘못 작성된 것일 확률이 높다고 한다. 쓰이는 일이 별로 없으니 가볍게 보고 넘어가라는 말.