<aside> 💡 클래스 ES6에서 도입된 프로토타입 기반 패턴의 문법적 설탕

</aside>

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

자바스크립트를 이루는 거의 모든 것이 객체다.

19.1 객체지향 프로그래밍

추상화 : 다양한 속성 중 필요한 속성만 가추려 내어 표현하는 것

const person = {
	name: 'Lee',
	address: 'Seoul'
}

19.2 상속과 프로토타입

<aside> 💡 상속 : 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것

</aside>

// 생성자 함수
function Circle(radius) {
	this.radius = radius;
	this.getArea = function () {
		return Math.PI * this.radius ** 2;
	};
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); // false

getArea함수의 중복 생성으로 인해 리소스가 낭비된다.

자바스크립트 프로토타입을 기반으로 상속을 구현하여 개선 할 수 있다.

// 생성자 함수
function Circle(radius) {
	this.radius = radius;
}

Circle.prototype.getArea = function () {
	return Math.PI * this.radius ** 2;
}

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea); // true

Circle 생성자 함수가 생성한 모든 인스턴스는 Circle.prototype의 모든 프로퍼티와 메서드를 상속받는다.

19.3 프로토타입 객체