Class (Javascript)

김무연·2023년 12월 7일
0

Frontend

목록 보기
10/12

class는 객체이자 물건 만드는 설명서입니다.

class안에는 함수와 변수를 넣을 수 있습니다. 이 변수와 함수를 조합해 붕어빵과 몬스터를 만드는 방법을 적어둘 수 있습니다.

그리고 붕어빵과 몬스터를 만들고 싶다면 new 붕어빵() 으로 만들어 줍니다.

만들어진 붕어빵과 몬스터는 객체 또는 인스턴스라고 부릅니다.

class에서의 함수와 변수 사용

  • 클래스에서 함수와 변수를 사용할 때는 function, let, const등을 붙이지 않습니다
  • 클래스 내에 정의된 함수를 method라고 부른다.
  • 클래스를 통해 생성된 객체를 인스턴스(instance)라고 부른다.
  • 클래스도 함수처럼 호출하기 전까지는 코드가 실행되지 않는다. 클래스를 정의만 했을 뿐이다. new키워드와 소괄호()를 사용하여 호출할 수 있다.
  • 클래스 이름은 항상 대문자로 시작한다.
  • constructor는 class에서 필요한 기초 정보를 세팅하는 곳이다. 객체를 new로 생성할 때 가장먼저 자동으로 호출된다.
  • this 는 본인 객체를 의미한다. 클래스 내에서 메소드끼리 소통하기 위해서는 this가 필요하다.
class Date {
  constructor(year, month) {
    this.year = year;
    this.month = month;
  }

  getFullYear(){

  }

  getMonth(){

  }
}

const date = new Date(2022, 4)

{
  year: 2022,
  month: 4,
  getFullYear() {
  }
  getMonth() {
  }
}

클래스 내에서 만들어진 함수를 메소드 라고 부릅니다. 위 처럼 Date 클래스를 만든 후 date객체를 만들면 위와 같은 인스턴스가 생성된다. 이후 date.getFullYear 처럼 클래스내의 메서드를 호출도 가능하다.

상속

오버로딩

  • 메서드 오버로딩(overloading)은 동일한 이름을 가진 여러 개의 메서드를 만든 후 매개변수 타입과 개수에 맞는 메서드가 자동으로 호출되는 기능을 말합니다.
    하지만 아쉽게도 자바스크립트는 문법적을 오버로딩을 제공하지 않습니다.

오버라이딩

  • 부모 클래스의 기능을 확장시키거나, 같은 이름으로 다시 한 번 정의해 기능을 덮어씌우는 것
class Monster {
  power = 50
  attack(): void {
    console.log("공격합니다!")
  }
}

// 상속
class SuperMonster extends Monster {
  run(): void {
    console.log("도망가자!!")
  }

  // 오버라이딩 (덮어쓰기)
  attack(): void { // 상속받아와도 다시 선언해주면 위에 것이 삭제됨
    console.log("슈퍼몬스터 필살기")
  }
}
profile
Notion에 정리된 공부한 글을 옮겨오는 중입니다... (진행중)

0개의 댓글