자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어입니다.

자바스크립트의 프로토타입은 객체 지향 프로그래밍에서 객체 간의 상속을 구현하는 데 사용됩니다. 오늘날에는 클래스 기반 언어의 상속이 널리 사용되지만, 프로토타입 기반 언어에서는 어떤 객체를 원형을 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다. 사용하기에 따라 클래스 보다 더 강력하고 효율적일수도 있습니다.

ES6부터는 클래스 문법이 도입되었습니다. 클래스가 기존의 프로토타입을 폐지하고 새로운 객체 지향 상속 모델을 도입하는 것은 아닙니다. 클래스도 일차적으로 자바스크립트의 기존 프로토타입 기반 상속에 대한 문법적 설탕입니다.

프로토타입 접근자 사용

예전에는 __proto__ 접근자를 사용하여 프로토타입에 접근할 수 있습니다. 하지만 오늘날 Deprevated되어 사라질 기능입니다. 따라서 사용하길 권장되지 않습니다.

다음과 같이 사용되었습니다.

console.log({}.__proto__);
console.log(new Number(2).__proto__);
console.log([1, 2, 3].__proto__);

지금은 Object.getPrototypeOf(), Object.setPrototypeOf()이 메서드를 사용하면 됩니다.

생성자 함수에서의 프로토타입 접근은 다음과 같이 사용됩니다.

function Person(name) {
	this.name = name;
}

// 인스턴스들에 공유될 프로토타입에 다음과 같이 접근합니다.
console.log(Person.prototype);

const hong = new Person('홍길동');
console.log(hong); // [[Prototype]]이 두 단계로 있음 (Person - Object)

프로토타입 체인

자바스크립트의 모든 객체는 프로토타입을 가집니다. 객체를 console.log 찍어보면 [[Prototype]]:을 가지는 것을 볼 수 있습니다. Object는 모든 객체들의 조상이므로 각 타입들의 프로토타입 안에는 [[Prototype]]: Object를 모두 가지고 있습니다.

이를 프로토타입 체인이라고 하며 특정 객체에 호출된 프로퍼티가 없다면 프로토타입을 거슬로 올라갑니다. 예시로 Array에는 valueOf가 없지만 그 프로토타입인 Object 안에는 있으므로 호출이 가능합니다.

프로토타입 상속

prototype은 모든 자바스크립트 객체가 가지고 있는 속성으로, 객체의 속성과 메서드를 다른 객체와 공유하도록 합니다.

function Person(name, age){
	this.name = name;
  	this.age = age;
}

Person.prototype.hello = function() {
	console.log(`My name is ${this.name}. I'm ${age}`);
}

const Kim = new Person("Kim", 20);
const Lee = new Person("Lee" , 21);

Kim.hello();//My name is Kim. I'm 20
Lee.hello();//My name is Lee. I'm 21

Person의 프로토타입에 새로운 메서드인 hello를 추가하여, Person 객체들이 해당 메서드를 공유하여 사용할 수 있습니다.