JS 클래스

class FavoriteMovie {
  constructor (name, type) {
    this.name = name;
    this.type = type;
  }
  introduce () { // 💡 메서드
    return `내가 좋아하는 영화는 ${this.name}이고 ${this.type}장르야!`;
  }
}

클래스의 기본 형태.

constructor매서드는 아래와 같은 특성을 지닌다.

• 인스턴스 생성시 인자를 받아 프로퍼티를 초기화함
• 클래스에 하나만 있을 수 있음 - 초과시 오류 발생
• 다른 메서드 이름을 쓸 수 없음
• 기본값 사용 가능
• 필요없을 (인자가 없을 때 등) 시 생략 가능
• 값을 반환하지 말 것! 생성자 함수처럼 암묵적으로 this 반환

---

생성자 함수와의 차이

클래스로 인스턴스 생성시 로그에서 프로토타입으로 들어간다.

간단하게 만들어서 콘솔로 확인해보자.

---

필드

class FavoriteMovie {
  actor = '실베스터 스탤론';  //field값이 정해져있으므로 constructor 필요없음.
  about = {'best': 1, 'worst': 5};
  constructor (name, type) {
    this.name = name;
    this.type = type;
  }
  introduce () {
    return `내가 좋아하는 영화는 ${this.name}이고 ${this.type}장르야!`;
  }
  more (name) {
    return `${this.about[name]}편이 제일 재밌었어`
  }
}


const movie1 = new FavoriteMovie('록키','액션');
const movie2 = new FavoriteMovie('대부', '느와르');

movie1.about['best'] = 6; //movie1만 변경. 과연 movie2도 영향이 있을까?

console.log(movie1.more('best'), movie2.more('best'))

여기서 알수 있는 것은 초기값만 같을 뿐, 인스턴스들의 값들은 개별적으로 적용된다!

---

정적(static)필드와 메서드

class FavoriteMovie {
  static theme = "복싱";
  static introduceTheme () {
      return `${this.theme}장르입니다.`;
  } 
  constructor (name, type) {
    this.name = name;
    this.type = type;
  }
  introduce () {
    return `내가 좋아하는 영화는 ${this.name}이고 ${this.type}장르야!`;
  }
}

이렇게 클래스를 선언하고 아래와 같이 테스트해봤다.

여기서 알수 있는 것은 static 필드는 클래스 차원에서만 호출이 가능하다는 점이다.

그리고 정적 메서드(introduceTheme)는 정적 필드(theme)만 사용 가능하다.
constructor로 만들어진 필드에 접근하면 에러가 발생한다.

그리고 만들어진 인스턴스 수에 관계없이 메모리한곳만 차지한다.

위의 class를 예시로 들면,
위의 class를 통해 만들어진 인스턴스들은 각각 name,type, introduce()를 차지하고 있는데,

static필드는 FavoriteMovie 단 한곳에서만 차지한다.