하루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 호출	부모객체(실행시점 온점 왼쪽)	하나의 객체에 값과 연관된 메소드를 묶어서 사용할떄 주로 사용
new 키워드를 이용한 생산자 호출	새롭게 생성된 인스턴스 객체	객체지향 프로그램에서 주로 사용
call 또는 apply호출	첫번째 인자로 전달된 객체	this 값을 특정 할 때 사용, 특히 apply 의 경우 배열의 엘리먼트를 풀어서 인자로 넘기고자 할때 유용

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