[2020. 10. 29 TIL] 객체 지향 프로그래밍 - inheritance pattern

상속 (inheritance pattern)

부모 Class가 가진 코드를 자식 Class가 상속함으로써 중복되는 코드를 없애주는 패턴. 또한 자식 class는 부모 class가 필요로 하지 않는 코드를 추가하여, 때에 따라 호출해서 그 메소드를 사용할 수 있다.

[한 줄 요약]
상속 패턴을 이용하여 기존 Class에 우아한 방법으로 기능을 추가할 수 있다.

상속 패턴 사용법

1. PseudoClassical

Object.create(부모class)

//pseudoClassical

var Human = function(name) {
	this.name = name;
}

Human.prototype.sleep = function() {
	console.log (this.name + ' is sleeping...');
}

var steve = new Human('steve');


// new Student로 인스턴스를 만들 때, this(인스턴스)가 Human으로 전달되지 않음.
// 그래서 call 메소드를 통해 this를 전달해줘야함!
var Student = function(name){
	Human.call(this, name); // Human.apply(this, arguments)
}

// 카피해서 새로 만든다.
Student.prototype = Object.create(Human.prototype);
// constructor와 instance 사이에 연결고리가 끊어지므로 다시 연결해야함
Student.prototype.constructor = Student;
Student.prototype.learn = function() {};

var john = new Student('john');
john.learn();
john.sleep(); // john is sleeping...

2. ES6 Class키워드를 이용한 상속

extends,

// ES6 Class키워드

class Human {
	constructor(name) {
		this.name = name;
	}
	sleep() {
		console.log(this.name + ' is sleeping...');
	}
}

var steve = new Human('steve');

class Student extends Human {
	constructor(name) {
		super(name)
	}
	learn() {
	
	}
}

var john = new Student('john');
john.learn();
john.sleep(); // john is sleeping...

super 키워드

부모 class가 가지고 있는 기능을 불러오는 키워드
super가 없을 경우, 상속받을 때 부모 class에서 속성을 추가하거나, 메소드를 수정하고 싶을때 직접 입력해야 하는 번거로움이 생긴다.
super 키워드를 이용해서 중복된 코드 없이 객체 지향 코딩을 할 수 있다!

super키워드의 2가지 사용법

1. super.() : constructor 안에서 괄호와 함께 호출하여 상속해주는 상위클래스의 속성들을 불러낼 수 있다

2. super.method() : 상위클래스의 메소드에 해당하는 return 값을 반환한다. 상위클래스에서 정의된 메소드에 기능을 추가할 수 있다

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;
	}
}