하루5분코딩"this"

## this : 함수 실행시 호출 방법에 결정되는 특별한 객체 "함수 실행시 결정"

함수실행의 5가지 방법

1. Global - 정확히는 실행은 아님. 전역에서 this를 참조 할 때를 의미

console.log(this)

2. function 호출

foo()

3. Method 호출

obj.foo()

4. new 키워드를 이용한 생산자 호출

new foo()

5. .call 또는 .apply 호출

foo.call() , foo.apply

함수실행에 따른 this binding 패턴

Method 호출 : 객체.메소드() 와 같이 객체 내에 메소드를 호출하는 방법

let counter1 ={
  value: 0,
  increase:functon(){
    this.value++//메소드 호출시 this 는 counter1을 가리킴
  },
  decrease: function(){
    this.value--
  },
  getValue: function(){
    return this.value
  }
}
counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

여러개의 카운터를 만들려면??

function makeCounter(){
  return{
    value: 0,
    increase:functon(){
      this.value++// 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체
    },
    decrease: function(){
      this.value--
    },
    getValue: function(){
      return this.value
    }
  }
}
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() //1
let counter2 = makeCounter()
counter2.increase()
counter2.increase()
counter2.increase()
counter2.increase()
counter2.getValue() //4

생산자 호출 :객체.메소드()와 같이 객체 내에 메소드를 호출하는 방법과 비슷하지만 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