19장 프로토타입 - 생성자 함수

인스턴스 생성시, 불필요한 중복을 프로토타입으로 제거하고, 오버라이딩과 프로퍼티 새도잉에 대해 알아 보겠습니다.

목차 📑

• 생성자 함수의 프로토타입
• 생성자 함수로 인스턴스 생성
• 인스턴스 오버라이딩과 프로퍼티 섀도잉

생성자 함수의 프로토타입

function Circle(r){
	this.r = r;
	this.getArea = function () {
	return Math.PI * this.r ** 2;
	}
}
const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea) // false

인스턴스를 생성할 때마다 메서드를 중복 생성하고 모든 인스턴스가 중복 소유합니다.
모든 인스턴스가 동일한 내용의 메서드를 사용하므로 단 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직합니다.

이처럼 동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하는 것은 메모리를 불필요하게 낭비합니다. 상속을 통해 불필요한 중복을 제거해 보겠습니다. 자바스크립트는 프로토타입을 기반으로 상속을 구현합니다.

생성자 함수로 인스턴스 생성

const Person = (function () {
// 생성자 함수
function Person(name){
 this.name = name;
}

// 프로토타입 메서드
Person.prototype.sayHello = function () {
 console.log(`Hello! my name is ${this.name}`)
}

// 정적 메서드
Person.sayHi = function(){
 console.log('Hi!')
}

// 생성자 함수 리턴
return Person
}())

const me = new Person('Jeon');

인스턴스 오버라이딩과 프로퍼티 섀도잉

me.sayHello = function () {
	console.log(`Hey! my name is ${this.name}`);
}

me.sayHello(); // Hey! my name is Jeon

프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면, 프로토타입 체인을 따라 프로토타입 프로퍼티를 검색하여 프로토타입 프로퍼티를 덮어쓰는 것이 아니라, 인스턴스 프로퍼티로 추가합니다.

이 때 인스턴스 메서드 sayHello()는 프로토타입 메서드 sayHello()를 오버라이딩했고 프로토타입 메서드 sayHello()는 가려집니다. 이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라 합니다.

마치며 🍺

객체 리터널 방식을 많이 사용하지만, 객체 지향 프로그래밍을 위해 생성자 함수로 인스턴스를 상속, 오버라이딩과 프로퍼티 섀도잉의 개념을 알아보는 시간이었습니다.
class로 인스턴스 생성하는 법과 비교해서 알아보는 것도 좋을 것 같습니다.

함께하면 좋은 글 😍

• 19장 프로토타입 - __proto__와 prototype
• 19장 프로토타입 - hasOwnProperty, Object.create
• 25장 클래스 - 클래스 정의, 클래스와 생성자 함수 비교