11-1. 프로토타입 사용 사례

자바스크립트에서 객체 지향 프로그래밍을 구현하는 방식으로는 프로토타입 상속, 객체 리터럴 등이 있다. 모든 자바스크립트의 함수는 프로토타입을 가지며, 빌트인 오브젝트 또한 프로토타입이 있다. 만약 프로토타입이 없으면 함수는 수명이 끝나며 해당 함수의 인스턴스가 메모리에서 해제된다.

프로토타입을 가지는 빌트인 오브젝트들

11-2. 프로토타입의 정의

모든 객체는 프로토타입 객체를 가지며, 이 프로토타입 객체는 해당 객체의 기능과 속성을 정의한다. 객체의 속성과 메서드는 프로토타입 객체에서 상속된다. 이렇게 상속 관계를 통해 ‘객체’ 간에 공통된 기능을 재사용할 수 있다.

11-2-1. 생성자 함수와 프로토타입

생성자 함수를 만들면 자동으로 프로토타입이 포함된다.

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

// 프로토타입에 메서드 추가
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

// 객체 생성
const person1 = new Person('Alice');
const person2 = new Person('Bob');
// 메서드 호출
person1.greet(); // 출력: Hello, my name is Alice
person2.greet(); // 출력: Hello, my name is Bob

위 방법처럼 Person을 정의하여 person1와 person2의 greet() 메서드를 호출하여 사용할 수 있다

11-2-2. 생성자와 프로토

비슷한 객체들은 비슷한 작업을 수행할 수 있어야 하므로, 공통된 기능을 공유하는 것이 효율적이다. 하지만 때로는 객체들이 각자 독립적인 작업을 수행해야 하는 상황도 있다.

function Taiyaki(){
    this.filling = "팥";
}

const taiyaki1 = new Taiyaki();
const taiyaki2 = new Taiyaki();
//taiyaki1의 프로토에 산입
taiyaki1.__proto__.setFilling = function(ReFilling){
    this.filling = ReFilling
		return this.filling+"으로 채운다"
}
//taiyaki1의 포로토타입에 산입
taiyaki1.eat = function(newFilling){
		return this.filling + "을 먹다"
}

console.log(taiyaki1.setFilling("크림")) // 크림으로 채운다
console.log(taiyaki1.eat()) // 크림 먹다

console.log(taiyaki2.setFilling("치즈")) // 치즈으로 채운다
console.log(taiyaki2.eat()) // 에러

위의 로직을 보면 console.log(taiyaki2.eat()) 에서 에러가 떠야 한다. 아직 팔리지 않은 taiyaki2 는 자신이 어떠한 목적으로 구매하였는지 모르기 때문에 메소드를 추가 하지 않는 것이 올바르다. 그래서 eat()이라는 메서드를 사용할 수 없게 해야 한다.

taiyaki1.__proto__.setFilling = function(ReFilling){
    this.filling = ReFilling
		return this.filling+"으로 채운다"
}