본문 바로가기
Frontend/JavaScript

9. 클래스

by 예린lynn 2024. 7. 15.
728x90

 

추상화

추상화는 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것이다. 

예를 들어, 병원에서 사용하는 프로그램을 만들 때 의사, 간호사, 환자, 병실 등의 필요한 정보를 추려내는 것이다.

 

 

생성자

생성자는 클래스를 기반으로 인스턴스를 생성할 때 처음 호출되는 메소드이다.

생성자에서는 속성을 추가하는 등 객체의 초기화 처리를 한다.

//기본형
 class 클래스 이름 {
   constructor () {
    /* 생성자 코드 */
   }
 }
 
 //예시
 class Student {
   constructor(이름, 국어, 영어){
     this.이름 = 이름
     this.국어 = 국어
     this.영어 = 영어
   }
 }

 

 

메소드 선언

//예시
getSum(){
  return this.국어 + this.영어
}

getAverage(){
  return this.getSum()/2
}

toString(){
  return '${this.이름}\t${this.getSum()}점\t${this.getAverage()}점\n'
}

const students = []
students.push(new Student('lynn',90,98))

 

 

상속

  • 상속은 extends 메서드를 이용해서 부모 클래스의 속성을 자식 클래스가 물려받아 사용할 수 있도록 한다.
  • 자식 클래스에서 속성을 추가할 때, constructor 재정의가 필요하다.
  • super() : 부모의 생성자 함수 호출
  • super. : 부모의 메소드에 접근
class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  introduce() {
    return 'My name is ${this.name}';
  }
}

class People extends Person{
  constructor(name, age, gender){
    super(name, age);
    this.gender = gender;
  }
  
 intro(){
   return super.introduce() + My sex is ${this.gender};
 }
}

 

 

728x90

'Frontend > JavaScript' 카테고리의 다른 글

8. 구조 분해 할당  (0) 2024.07.15
7. 객체  (0) 2024.07.09
6. 콜백 함수  (0) 2024.07.08
5. 함수  (0) 2024.07.07
4. 배열  (0) 2024.07.07