JavaScript class 상속

otter·2021년 7월 19일

Java Script

목록 보기
11/13
post-thumbnail

OOP(Object-oriented programming)


객체 지향 프로그래밍을 공부하던 도중, 상속에 관한 부분에서 이해가 어려웠다.
때문에 블로그에 정리하려 한다.

class BabyOtter {
  constructor() {
    this.name = "otter";
    this.age = 1;
    this.gender = "male";
  }
  
  eat() {
    console.log(`${this.name}가 밥을 먹습니다.`)
  }
}
class TeenagerOtter extends BabyOtter {
  constructor() {
	super()
	this.age = 17;
    this.job = "student"
  }
  
  study() {
	console.log(`${this.name}가 공부를 합니다.`)
  }
}
class AdultOtter extends TeenagerOtter {
  constructor() {
    super()
    this.age = 28;
    this.job = "developer";
  }
  
  coding() {
     console.log(`${this.name}가 코딩을 합니다.`)
  }
}

위 코드를 보면 BabyOtter에게 TeenagerOtter가 상속을 받은 뒤 AdultOtterTeenagerOtter에게 상속을 받는다.


그 과정에서 extends를 통해 constructor와 메소드가 계승되어 내려온다.


그리고 constructor 내에 가장 위에 있는 super()들을 이용해 속성을 모두 받아온다.


그리고 아래와 같은 코드를 입력하면

const otter = new AdultOtter()

otter는 아래의 모양을 갖게 된다.

otter = {
  name = "otter";
  age = 28;
  gender = "male";
  job = "developer"
}

otter.eat() {
  console.log(`otter가 밥을 먹습니다.`)
}

otter.study() {
  console.log(`otter가 공부를 합니다.`)
}

otter.coding() {
  console.log(`otter가 코딩을 합니다.`)
}

0개의 댓글