[자바스크립트(JavaScript)] 상속

// 상속, Inheritance

class 자식클래스명 extends 부모클래스명 {
    추가될 속성
}

- 기존의 class를 상속해 새로 추가된 class를 만들 때 사용한다.

- 중복을 제거하여 코드의 양을 줄이고, 유지보수의 편리성을 높여준다.

---

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat() {
    return `${this.name} is eating!`;
  }
}

class Cat extends Pet {
  meow() {
    return 'MEOWWWW!';
  }
}

class Dog extends Pet {
  bark() {
    return 'WOOOOF!';
  }
}

const blue = new Dog('Blue', 4);
const kiki = new Cat('Kiki', 3);

---

// Super

- 부모 클래스가 가지고 있는 기능을 실행할 수 있게 해준다.

- 용법

    1. 부모 클래스의 생성자 호출 
        ~ super(상속 받을 매개변수)

    2. 부모 클래스의 메소드 호출
        ~ super.메소드()

---

class Person {
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum() {
        return (this.first + this.second)
    }
}

class PersonPlus extends Person {
    constructor(name, first, second, third) {
        super(name, first, second);
        this.third = third;
    }
    sum() {
        return super.sum() + this.third;
    }
    avg() {
        return (this.first + this.second + this.third)/3;
    }
}

var hanee = new PersonPlus('hanee', 10, 20, 30);
console.log('hanee', hanee);
console.log('hanee.sum()', hanee.sum());
console.log('hanee.avg()', hanee.avg());

console.log();

---

// 객체 상속

1. __proto__

- object끼리의 상속 시 프로토타입 링크를 설정한다.

- 객체가 다른 객체를 상속받고 싶을 때 사용한다.

- 상속의 역할을 하는 것, 즉 부모 객체를 지정할 수 있다.

※ VS prototype

- 클래스에서 생성자나 메서드 추가가  필요할 때 클래스에 접근하기 위해서 사용하는 키워드

---

var superObj = {superVal:'super'};
var subObj = {subVal:'sub'};

subObj.__proto__ = superObj;

console.log('subObj.subVal =>', subObj.subVal);
console.log('subObj.superVal =>', subObj.superVal);

subObj.superVal = 'sub';

console.log('superObj.subVal =>', superObj.subVal);
console.log('superObj.superVal =>', superObj.superVal);

---

hanee = {
    name:'hanee',
    first:10, second:20,
    sum:function(){return this.first+this.second}
}
han = {
    name:'lee',
    first:10, second:10,
    avg:function(){return (this.first + this.second) / 2}
}
han.__proto__ = hanee;
console.log('han.sum() ', han.sum())
console.log('han.avg() ', han.avg())

---

2. Object_create()

-  객체를 상속 받는 새로운 객체를 생성할 수 있다.

var superObj = {superVal:'super'};

 var subObj = Object.create(superObj);
 subObj.subVal = 'sub';

console.log('subObj.subVal =>', subObj.subVal);
console.log('subObj.superVal =>', subObj.superVal);

subObj.superVal = 'sub';

console.log('superObj.subVal =>', superObj.subVal);
console.log('superObj.superVal =>', superObj.superVal);

---

hanee = {
    name:'hanee',
    first:10, second:20,
    sum:function(){return this.first+this.second}
}
var han = Object.create(hanee);
han.name = 'lee';
han,first = 10;
han.second = 10;
han.avg = function() {
    return (this.first + this.second) / 2;
}

console.log('han.sum() ', han.sum())
console.log('han.avg() ', han.avg())

---

// 생성자를 통한 상속(비추..)

- class를 이용하지 않고 prototype을 사용해 상속한다.

- call을 사용해 생성자 함수가 생성자 함수를 상속하도록 만든다.

---

function Person(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
}

Person.prototype.sum = function() {
    return this.first + this.second;
}

function PersonPlus(name, first, second, third) {
    Person.call(this, name, first, second);
    this.third = third;
}

// PersonPlus.prototype.__proto__ = Person.prototype
PersonPlus.prototype = Object.create(Person.prototype); //PersonPlus의 객체의 생성자는 Person을 가리킴
PersonPlus.prototype.constructor = PersonPlus //이제PersonPlus의 객체의 생성자는 PersonPlus를 가리킴

PersonPlus.prototype.avg = function() {
    return (this.first + this.second + this.third) / 3;
}

var hanee = new PersonPlus('hanee', 10, 20, 30);
console.log('hanee.sum()', hanee.sum());
console.log('hanee.avg()', hanee.avg());
console.log('hanee.constructor', hanee.constructor);