반응형
클래스의 경우 파이썬이나 다른 언어를 다뤄본 사람이라면 쉽게 다뤄 볼 수 있다고 생각하여, 간단한 예시들만 정리하였다.
클래스 선언
'class' 키워드를 이용하여 선언한다. 클래스 내부에는 생성자 메서드와 클래스 멤버를 정의할 수 있다.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
const myAnimal = new Animal('Dog');
myAnimal.speak(); // "Dog makes a noise."
클래스 상속
클래스 상속은 기존 클래스를 확장하여 새로운 클래스를 정의하는 것을 말합니다. extends 키워드를 사용하여 부모 클래스를 상속받는다.
class Dog extends Animal {
constructor(name, breed) {
super(name); // 부모 클래스 생성자 호출
this.breed = breed;
}
speak() {
console.log(`${this.name} barks.`);
}
displayBreed() {
console.log(`${this.name} is a ${this.breed}.`);
}
}
const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // "Buddy barks."
myDog.displayBreed(); // "Buddy is a Golden Retriever."
메서드 오버라이딩
하위 클래스에서 상위 클래스의 메서드를 재정의하여 사용할 수 있다. 이를 메서드 오버라이딩이라고 한다.
class Cat extends Animal {
constructor(name) {
super(name);
}
speak() {
console.log(`${this.name} meows.`);
}
}
const myCat = new Cat('Whiskers');
myCat.speak(); // "Whiskers meows."
반응형
'FrontEnd > 자바스크립트' 카테고리의 다른 글
[JS] 순수 함수를 활용한 데이터 변환 메서드 (0) | 2024.08.13 |
---|---|
[자바스크립트] ES6+ 고차함수 (0) | 2024.07.12 |
[자바스크립트] ES6+ 화살표 함수 (0) | 2024.07.12 |
[자바스크립트] ES6+ 전개문법 (0) | 2024.07.12 |
[자바스크립트] ES6+ 배열/객체 비구조화 (0) | 2024.07.12 |