FrontEND/JavaScript

class 문법을 사용하면 상속 관계

smartlittlepuppy 2023. 4. 16. 20:53
반응형

// 부모 클래스
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// 자식 클래스
class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

// 객체 생성 및 사용
let dog = new Dog('Rex');
dog.speak(); // "Rex barks."

 

 

위 코드에서 Animal 클래스는 부모 클래스이며, Dog 클래스는 자식 클래스입니다. Dog 클래스는 Animal 클래스를 상속하고 있습니다. Dog 클래스에서 extends 키워드를 사용하여 Animal 클래스를 상속받고, super() 메소드를 사용하여 부모 클래스의 생성자를 호출합니다. Dog 클래스에서 speak() 메소드를 오버라이드하여 자신만의 독특한 메시지를 출력합니다. 마지막으로 let dog = new Dog('Rex');로 객체를 생성하고 dog.speak();로 자식 클래스의 speak() 메소드를 호출합니다. 이때, 자식 클래스에서 오버라이드한 speak() 메소드가 호출됩니다. 

 

이 예제에서는 class 문법을 사용하여 상속을 구현하였으며, ES5에서는 프로토타입을 사용하여 상속을 구현할 수 있습니다. 하지만, class 문법을 사용하면 좀 더 간결하고 직관적인 코드를 작성할 수 있습니다.

반응형

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

1~45숫자중에서 로또번호 만들기  (0) 2024.01.24
getElementById,onclick 함수 사용법  (0) 2024.01.23
프로토타입 기반의 상속 방법  (0) 2023.04.16
public, private, get,set  (0) 2023.04.16
프로토타입  (0) 2023.04.16