2022-11-23: 생활코딩 - JavaScript 객체 지향 프로그래밍 (2)

1️⃣ 상속 (Inheritance)

상속 (Interitance)
- 메인 객체의 기능을 물려받으면서 새로운 기능을 추가, 확장하는 것
- 상속을 이용하면 기존에 사용하고 있는 객체의 내용을 변경할 필요 없이 새로운 기능을 붙일 수 있어, 유지보수가 편해진다는 장점이 있다.
  - 객체 내의 내용을 변경하면 기존에 해당 객체를 사용하고 있는 변수들에도 영향을 줄 수 있으므로 좋지 않다.
- 상속을 통해 같은 내용을 가진 객체를 만들지 않아도 되기에 코드 중복을 덜 수 있다.
class에서의 상속
```
class Person { // 메인 클래스
	constructor(name, first, second){
		this.name = name;
		this.first = first;
		this.second = second;
	}
	sum(){
		return 'prototype : '+(this.first+this.second);
	}
}

class PersonPlus extends Person { // 메인 클래스인 Person에 상속된 서브 클래스
	avg() {
		return (this.first+this.second)/2;
	}
}

let kim = new PersonPlus('kim', 10, 20);

console.log('kim.sum()', kim.sum()); // kim.sum() prototype : 30
console.log('kim.avg()', kim.avg()); // kim.avg() 15
```
클래스에서의 상속은 생성한 클래스의 이름 뒤에 extends와 함께 메인이 될 클래스명을 붙이는 것으로 상속을 적용할 수 있다.
- 서브 클래스인 PersonPlus 내에 변화가 이루어질 경우, PersonPlus를 통해 생성된 객체에는 영향이 적용되지만 메인 클래스인 Person을 통해 생성된 객체에는 영향을 주지 않는다.
  - 이는 PersonPlus의 내용이 기존 Person에서 확장된 내용을 담고 있으므로, 확장된 내용을 담지 않은 기존 객체인 Person은 영향을 받지 않는다.
- 반대로 메인 클래스인 Person 내에 변화가 생기면, PersonPlus는 Person에서 확장된 내용이므로 그 변화의 영향을 같이 받는다.
생성자 함수에서의 상속
- 생성자 함수에서의 상속은 2️⃣ super와 4️⃣ call과 apply, 그리고 bind의 내용을 학습하고 보는 것이 좋다.
```
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.avg = function(){
    return (this.first+this.second+this.thrid)/3;
}
```
생성자 함수에서의 상속은 **call() 메소드를 이용해 상속/확장을 적용할 수 있다.**
- 생성자 함수 PersonPlus에 함수 Person을 상속시키려면 PersonPlus 코드 내에서 call()을 이용하면 된다.
  - 단, call()의 첫 번째 인자값은 this로 받고자 하는 데이터였으므로, 여기서는 this를 인자로 넣는다.
    - 여기서의 this는 생성자 함수 PersonPlus를 가리키는 this이다.
  - 이 방식은 class와 비교할 때 super와 매우 유사하다.
단, call()을 이용해 상속할 수는 있지만 외부에서 prototype으로 정의한 속성이나 메소드를 받아오지는 못한다.

메인 생성자 함수의 prototype까지 상속받으려면 서브 생성자 함수의 prototype 속성값을 메인 생성자 함수의 prototype 객체로 하는 새로운 객체를 만들면 된다.
```
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.avg = function(){
    return (this.first+this.second+this.thrid)/3;
}

**PersonPlus.prototype = Object.create(Person.prototype);**
```
- 서브 생성자 함수 PersonPlus의 prototype 값을 메인 생성자 함수 Person의 prototype 객체를 본뜬 새로운 객체로 지정함으로서 상속받을 수 있게 됐다.

그러나 이 방식을 사용하게 되면 서브 생성자 함수 PersonPlus를 이용해 생성한 새로운 객체에 생성자(constructor)를 확인 시, PersonPlus가 아닌 메인 생성자 함수 Person을 가리키게 된다.

Untitled

이를 방지하기 위해, PersonPlus의 prototype 속성에 있는 생성자(constructor) 속성을 자신으로 받도록 지정해줘야 한다.

즉, 서브 생성자 함수의 prototype 객체의 constructor 속성값을 자신으로 지정해줘야 한다.

**PersonPlus.prototype.constructor = PersonPlus;**

PersonPlus가 참조하는 prototype 객체는 현재 자신이 아닌 Object.create를 통해 메인 생성자 함수인 Person의 prototype을 본뜬 객체이므로, 해당 객체가 가진 생성자는 기존에 참조하고 있던 Person을 받아오고 있을 것이다.

그렇기 때문에 이런 식으로 서브 생성자 함수인 PersonPlus가 현재 prototype 객체의 생성자임을 가리키도록 지정해줘야 한다.

목차

1️⃣ 상속 (Inheritance)