this에 대하여[2]

요점

this는 함수 실행 시 호출 방법에 의해 결정되는 특별한 객체이다.

함수 실행 시 결정되므로, 실행되는 맥락에 따라 this는 다르게 결정된다.

함수 실행의 5가지 방법

• Global: 정확히 말하면 함수 실행은 아니고, 전역에서 this를 참조할 때를 의미한다.
  console.log(this)

• Function 호출
  foo()

• Method 호출
  obj.foo()

• new 키워드를 이용한 생성자 호출
  new Foo()

• .call 또는 .apply 호출
  foo.call()
  foo.apply()

함수 실행에 따른 this 바인딩 패턴

1. 일반적인 패턴

2. 추가적으로 알아두자

코드로 보는 예제

- Method 호출

메소드 호출은 객체.메소드() 과 같이 객체 내에 메소드를 호출하는 방법을 의미한다.

단순 객체를 사용한 Singleton 패턴에서 이러한 예제를 흔히 볼 수 있다. 다음은 카운터를 구현한 예제이다.

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메소드 호출을 할 경우, this는 counter1을 가리킨다.
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

- 생성자 호출

생성자 호출은 객체.메소드() 과 같이 객체 내에 메소드를 호출하는 방법과 비슷하지만, 객체가 new 키워드를 이용해서 만들어졌다는 것이 다르다.

이 때의 객체를 인스턴스라고 부른다. 즉 인스턴스.메소드() 의 형태의 호출이다.

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1