일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- JavaScript
- 선택자
- react
- hatso
- 우아한테코톡
- next.js
- array
- dev
- gitCLI
- hooks
- ES6+
- 변수
- developerlife
- API
- git
- This
- github
- learn next.js
- AI
- JS
- 햇소
- ES5+
- Python
- CSS
- 함수
- 최적화
- es6
- html5
- DOM
- object
Archives
- Today
- Total
codinghatso
클래스 상속 (Inherit) 본문
클래스의 상속은 만들어 놓은 클래스의 기능들을 그대로 가져다 쓸 수 있으면서도, 상속받은 클래스의 고유한 기능을 추가할 수 있기 때문에 체계적으로 구조화 된 서비스를 개발하는데 아주 중요한 역할을 합니다.
키워드
// 1. extends - 상속받을 클래스를 지정하는 지시자입니다.
class ChildClass extends ParentClass {}
//이런 방식으로 부모 클래스(Parent Class)를 상속받게 됩니다. 호출하지 않으면 부모 클래스의 생성자에서 초기화한 변수나
//메서드를 사용할 수 없게 됩니다.
//2. super - 부모 클래스의 생성자(constructor()) 를 호출합니다. 자식 클래스의 생성자에서 호출하며,
//부모 클래스의 생성자를 호출합니다.
class ChildClass2 extends ParentClass {
constructor(param) {
super(param);
//자식 클래스에서 추가로 사용할 변수 설정
}
//추가 메서드 작성
}
// 클래스 상속 구현예시
class Person {
constructor(firstname, lastname, age, gender) {
this.name = { first: firstname, last: lastname };
this.age = age;
this.gender = gender;
}
getAge(firstname, lastname) {
return this.age;
}
getGender(firstname, lastname) {
return this.gender;
}
}
// Person 을 상속 받아 Teacher 클래스 생성
class Teacher extends Person() {
constructor(firstname, lastname, age, gender, subject) {
super(firstname, lastname, age, gender);
this.subject = subject;
}
getSubject(firstname, lastname) {
return this.subject;
}
}
// Person 을 상속 받아 Student 클래스 생성
class Student extends Person() {
constructor(firstname, lastname, age, gender, grade) {
super(firstname, lastname, age, gender);
this.grade = grade;
}
getGrade(firstname, lastname) {
return this.grade;
}
}
let teacher = new Teacher("라", "이언", 5, "male", "math");
let student = new Student("어", "피치", 4, "female", 3);
출력문
console.log(teacher.getSubject("라", "이언"));
console.log(student.getAge("어", "피치"));
console.log(student.getSubject("어", "피치"));
'WEB > JavaScript_Diary' 카테고리의 다른 글
Arrow function 화살표 함수 (0) | 2022.03.08 |
---|---|
this 키워드 (0) | 2022.03.08 |
JS객체 정의 (0) | 2022.03.01 |
JSON(JavaScript Object Notation) (0) | 2022.02.01 |
array API (2) (0) | 2022.01.26 |
Comments