프로토타입과 클래스

JiHun·2023년 5월 11일

목록 보기

4/5

💼 프로토타입(prototype)

프로토타입은 원형을 뜻한다. 왜 프로토타입이 쓰일까?
결론만 말하자면, 객체 간 상속을 구현하기 위해 사용된다.
프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공한다.

🗂️ 왜 프로토타입 쓸까?

📑문제

메서드를 그냥 프로퍼티를 선언할 경우 어떤 문제가 생길까?

// ES5 문법
function 사람(age) {
	this.age = age;
    this.speak = function() {
    	return `저는 ${this.age}살 입니다.`
    }
}

const 사람1 = new 사람(11);
const 사람2 = new 사람(22);


console.log(사람1.speak === 사람2.speak); // false
console.log(사람1.speak);  // "저는 11살 입니다."
console.log(사람2.speak);  // "저는 22살 입니다."

사람1, 사람2에게 상속을 했다. 여기서 speak() 메서드를 서로 둘 다 쓸 수 있다.
함수는 똑같이 생겼지만 서로 다르다고 출력한다. 서로 다른 인스턴스에 상속돼서 다른 함수로 취급받는 것이다. 내용이 동일한 메서드가 중복으로 생성됐다. 이것은 메모리 측면에서 비효율적이다.
모든 인스턴스들이 동일한 내용의 메서드를 사용하므로 단 하나만 생성하여 모든 인스턴스가 공유하는 것이 효율적일 것이다.
하지만 생성자 함수 사람는 인스턴스를 생성할 때마다 speak 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

📑해결방법

function 사람(age) {
	this.age = age;
}

// 모든 인스턴스들이 공유 사용하게 프로토타입에 추가한다.
// 프로토타입은 사람 생성자 함수의 prototype이라는 프로퍼티에 바인딩 되어있다.
사람.prototype.speak = function() {
	return `저는 ${this.age}살 입니다.`
}

const 사람1 = new 사람(11);
const 사람2 = new 사람(22);

console.log(사람1.speak === 사람2.speak); // true;
console.log(사람1.speak);  // "저는 11살 입니다."
console.log(사람2.speak);  // "저는 22살 입니다."