🔖 객체지향4. ES6방식으로 구현하는 상속기능 (class)

상속을 구현하는 또 다른 방법인 class 문법을 알아보자.

자바스크립트에서 class 라는 문법은 ES6에 추가되었다. 다른 객체 지향언어들과 비슷한 문법이다. 

 

class 문법은 constructor라고 명시적으로 적어 줄 수 있다.👍

// ES6 class 키워드로 구현하는 constructor 기계만들기

class 부모 {
  constructor() {
    this.firstName = '강';
  }
}

var 자식 = new 부모();

console.log(자식); // 부모 {firstName: '강'}
console.log(자식.firstName) // 강

constructor() { } 라고 쓴 부분에 this.~~~ 하면 새로 생성되는 오브젝트들에 값을 부여할 수 있다.

 

상속가능한 함수를 추가하려면 어떻게 해야할까?

1. consturctor에 추가하는방법

2. 부모의 prototype에 추가하는 방법

2가지가 있다. 

 

1. 함수를 this.sayHi 이렇게 constructor 안에 추가하는 방법

class 부모 {
  constructor() {
    this.fisrtName = '강';
    this.sayHi = function() { console.log('Hi!'); } // ◀︎ 자식이 직접 가지게 됨
  }
}

var 자식 = new 부모();

자식.sayHi() // Hi!
console.log(자식) // 부모 {fisrtName: '강', sayHi: ƒ} ◀︎ 자식이 직접 sayHi 함수를 가지게 됨

 

위 방법으로 생성되는 자식은 sayHi() 함수를 직접 가지게 되며 자유롭게 쓸 수 있다.

 

 

 

2. 부모의 prototype에 추가하는 방법

class 부모 {
  constructor() {
    this.firstName = '강';
  }
  sayHi() { // ◀︎ 자식이 직접 가지지 않음 why? 부모의 prototype에 추가했기 때문임 
    console.log('Hi!');
  }
}

부모.prototype.sayHello = function () { // ◀︎ 자식이 직접 가지지 않음 why? 부모의 prototype에 추가했기 때문임 
  console.log('Hello!');
}

var 자식 = new 부모();

console.log(자식) // 부모 {firstName: '강'} ◀︎ 자식이 직접 sayHi, sayHello 함수를 가지지 않음
자식.sayHi() // 'Hi!' ◀︎ 부모의 prototype에 추가했기 때문에 사용은 가능함
자식.sayHello() // 'Hello!' ◀︎ 부모의 prototype에 추가했기 때문에 사용은 가능함

오브젝트에 함수 추가 하듯이 하면 된다.

그럼 자식은 sayHi()라고 썼을 때 부모의 prototype에 있던 sayHi() 함수를 쓸 수 있다.

(혹은 부모.prototype.sayHello = function() {} 이렇게 추가해도 된다.)

 

주의!

- 부모의 prototype에 추가하는 방법은 자식이 sayHi()함수를 직접 가지고 있지 않다.

 

 

진짜 부모의 prototype에 추가됬는지 확인해보자.

console.log(자식.__proto__) // {sayHello: ƒ, constructor: ƒ, sayHi: ƒ}
console.log(부모.prototype) // {sayHello: ƒ, constructor: ƒ, sayHi: ƒ}

sayHello 함수와 sayHi 함수가 부모의 prototype 에 잘 추가된것을 볼 수 있다.

 

 

참고로 Object.getPrototypeOf() 를 사용해도 부모 prototype을 알 수  있다.

console.log(Object.getPrototypeOf(자식)); // {sayHello: ƒ, constructor: ƒ, sayHi: ƒ}

 

 

constructor안에 파라미터 추가하기

class 부모 {
  constructor(이름, 나이){
    this.firstName = '강';
    this.lastName = 이름;
    this.age = 나이;
  }
}

var 자식 = new 부모('동욱', 26);

console.log(자식) // 부모 {firstName: '강', lastName: '동욱', age: 26}

이런식으로 파라미터를 넣어서 constructor를 만들 수 있다.