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. 일반적인 패턴

패턴	바인딩되는 객체	설명
Method 호출	부모 객체 (실행 시점에 온점 왼쪽에 있는 객체)	하나의 객체에 값과 연관된 메소드를 묶어서 사용할 때 주로 사용함
new 키워드를 이용,생성자 호출	새롭게 생성된 인스턴스 객체	객체 지향 프로그래밍에서 주로 사용함
.call .apply 호출	첫번째 인자로 전달된 객체	this 값을 특정할 때 사용하며, 특히 apply의 경우 배열의 엘리먼트를 풀어서 인자로 넘기고자 할 때 유용함

2. 추가적으로 알아두자

패턴	바인딩되는 객체(브라우저)	바인딩되는 객체(node.js)
Global	window (strict mode에서는 undefined)	module.exports
Function	window (strict mode에서는 undefined)	global

코드로 보는 예제

- 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