자바스크립트 클래스 Class 입문

Achivement Goals

✅  클래스와 인스턴스라는 용어를 이해할 수 있다. ( new 키워드 사용법 / class 키워드 사용법 )

✅  객체 지향 프로그래밍 특징을 이해할 수 있다. ( 캡슐화 / 상속 / 추상화 / 다형성 )

✅  JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.

✅  Prototype이 무엇인지 이해할 수 있다

✅  객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.

✅  현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인하고 상속 관계를 가진 모델을 코드로 작성할 수 있다.

✅  Prototype chain을 이해하고 설명할 수 있다. (__proto__)

 

 

📌  돌아보기

 

◾ 메서드 호출 : 1번만 쓸 수 있음

 

(단순)객체 내의 메서드를 호출하는 방법

 

❗ 메서드 호출 방식을 사용할 때는 화살표 함수는 쓰지 않는다 ❗

 

화살표 함수는 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않기 때문이다.

즉, 화살표 함수는 "메서드 함수가 아닌 곳"에 가장 적합하다.

 

// Singleton Pattern 
// : 단 하나의 객체만 만들 수 있음
// : 생성된 객체를 어디서든 참조할 수는 있지만, 여러 프로세스가 동시에 참조할 수는 없음
// 즉, counter1만 가지고 조물조물 만질 수 있는거임

let counter1 = {
  value: 0,
  increase: function() {
    this.value++
  },
  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: function() {
      this.value++
    },
    decrease: function() {
      this.value--
    },
    getValue: function() {
      return this.value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2