this ? ? ?

• 자바스크립트를 처음 배우면서 this를 만났을 때 참 난감했다.
• this와 같이 call, apply 메서드가 삼총사로 몰려다녀서 명확히 this를 이해하기 힘들었다.
• 내가 아는 this라고는 영어의 지시 대명사 뿐인데 말이다.
• 하지만 지금에 와서 되돌아보면 지시대명사 정도로 이해했으면 쉬울뻔했던 개념이었다.

그래서 this가 뭐지?

• 자바스크립트에서의 this, 영어에서의 그것과 크게 다르지 않았다.
• this는 어떤 대상(객체의 프로퍼티)의 참조 관계를 가리킨다.
• 참조 관계라는 말이 쉽지가 않다.
• 어려운 말이지만 우리가 롤모델을 정해 롤모델의 행동들을 따라가는 일련의 과정, 그것과 비슷하지 않을까?

활용해보자

var v1 = 'f1'
var v2 = 'f2'
var obj1 = {
  v1: 'v1',
  v2: 'v2',
  f1: () => this.v1,
  f2: () => this.v2
}

var obj2 = {
  v1: 'v1',
  v2: 'v2',
  f1: function () {
    return this.v1
  },
  f2: function () {
    return this.v2
  }
}

obj1.f1()
ojb1.f2()

obj2.f1()
boj2.f2()

• 위와 같은 코드에서 같은 this를 사용했지만, 가르키는 참조 대상이 다르다.
• 먼저, obj1의 f1과 f2 메서드는 화살표 함수의 특성으로 해당 객체의 프로퍼티를 가르키지 않고 전역 범위에 있는 변수를 참조한다.
• 반면에, obj2의 f1과 f2 메서드는 obj2의 프로퍼티를 참조한다.