ES5 & ES6 객체지향

beenvyn·2024년 7월 13일

Javascript 심화

목록 보기

9/18

🍞 ES5로 구현하는 상속기능

Object.create(물려받을 부모 object) 형태로 사용

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모); // 프로토타입을 부모로 해주세요~ 라는 뜻

console.log(자식); // {}
console.log(자식.age); // 50

자식의 age 바꾸기

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모);
자식.age  = 20;

console.log(자식.age); // 20

Js는 오브젝트에서 특정 자료를 꺼낼 때 작동 순서가 있기 때문에 50이 아니라 20이 출력된다.

손자 만들기

var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모);
자식.age  = 20;

var 손자 = Object.create(자식);

console.log(손자.age); // 20

얘도 js의 작동 순서로 인해 20이 출력된다.

🥐 ES6로 구현하는 상속기능

class 키워드를 사용한다.

class 부모 {
  constructor(){
    this.name = 'Kim'
  }
}

var 자식 = new 부모();

상속가능한 함수 추가하기

constructor 안에 추가하는 방법

class 부모 {
  constructor(){
    this.name = 'Kim';
    this.sayHi = function(){ console.log('hello') }
  }
}

var 자식 = new 부모();
console.log(자식); // {name: 'Kim', sayHi: ƒ}

➡️ 자식 오브젝트가 함수를 직접 가지게 된다.

prototype에 추가하는 방법

class 부모 {
  constructor(){
    this.name = 'Kim';
  }
  sayHi(){ 
    console.log('hello') 
  }
}

var 자식 = new 부모();
console.log(자식); // {name: 'Kim'}

➡️ 자식 오브젝트가 함수를 직접 가지지 않는다. 부모.prototype에서 참조해서 사용 가능.

Object.getPrototypeOf()

()안에 있는 오브젝트의 부모 prototype을 출력해준다.

Object.getPrototypeOf(자식); // 자식의 부모 prototype을 출력해주세요~
자식.__proto__; // 똑같은 말

Extends

다른 class를 상속해서 만들 수 있게 도와주는 문법 으로
유사한 class를 하나 더 만들고 싶을 때 사용한다.

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{

}

var 아버지1 = new 아버지(); // 아버지1 = {성: 'Kim', 이름: undefined}

아버지 class에 새로운 속성 추가하기

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(){
    this.나이 = 50; ❌ 
  }
}

⚠️ extends 해서 만든 class는 this를 그냥 쓸 수 없음!
➡️ super()를 써줘야 함

Super의 용도 1

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50; ✅
  }
}

✨ constructor안의 super()는 물려받는 class의 constructor()를 의미한다.

그리고 부모 class의 constructor()에 있는 파라미터 자식 constructor() 파라미터에도 명시해주는거 잊지 말기! 그래야 부모가 가진 속성들을 정확히 상속받을 수 있음.

Super의 용도 2

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi(); // 안녕 나는 할아버지
  }
}

여기서 super는 할아버지.prototype을 의미한다.

✨ constructor밖의 super는 물려받는 class의 prototype을 의미한다.

주로 class간에 함수를 상속할 때 사용한다.

✍🏻 연습 문제

Q. 모든 고양이와 강아지 object들은 .한살먹기() 라는 함수를 사용할 수 있습니다.
1) 한살먹기 함수는 강아지 class로부터 생성된 오브젝트가 사용하면 콘솔창에 에러를 출력해주어야합니다.
2) 한살먹기 함수는 고양이 class로 부터 생성된 오브젝트가 사용하면 현재 가지고있는 age 속성에 1을 더해주는 기능을 실행해야합니다.
한살먹기 함수는 어떻게 만들면 좋을까요?

class Dog {
  constructor(타입, 칼라){
    this.type = 타입;
    this.color = 칼라;
  }
  한살먹기(){
    if( this instanceof Cat) {
       this.age++
    }
  }
}

class Cat extends Dog {
  constructor(타입, 칼라, 나이){
    super(타입, 칼라);
    this.age = 나이;
  }
}