Prototype

💡 Javascript는 프로토타입을 기반으로 하는 언어다. 보통 객체지향언어는 클래스를 기반으로 하는 언어인데 특이하게도 Javascript는 객체지향 언어이지만 클래스를 기반으로 하지 않는다.

Prototype이란?

객체를 원형으로 하는 Prototype은 이를 이용해서 새로운 객체를 만들어나갈 수 있도록 한다.
때문에 객체를 확장하여 객체지향 프로그래밍을 할 수 있도록 한다.

Javascript에서 함수를 정의하면 동시에 해당 함수의 Prototype Object도 동시에 생성된다.

사람이 기본적으로 심장을 가지고 있는 것처럼 함수 내부에도 prototype이라는 것을 기본적으로 가지게된다.

이 prototype은 Prototype Object를 참조합니다.

Prototype Object는 기본적으로 멤버 변수로 constructor와 Prototype Link라는 __proto__를 가지고 있다.

여기서 constructor 속성은 함수를 참조한다.

⭐️ Prototype object를 참조하는 prototype은 new라는 연산자와 해당 함수를 통해 생성된 객체의 원형이 되는 객체다.
모든 객체들은 __proto__속성을 가지고 있어서 덕분에 함수에 직접 연결하지 않고도 함수의 prototype 객체를 알아보고 연결할 수 있는 것이다.

new 생성자로 생성된 객체는 생성되기 위해 사용된 원형인 Prototype Object를 가리키는 __proto__라는 숨겨진 링크로 참조하고 있다.

객체 멤버

이해를 위해 오리 이야기🐥를 가지고와봤다...

👑오리는 함수를 정의하여 🐥A, 🐥B, 🐥C를 만들려고 한다.

function Duck() {
	this.hair = 3;
	this.eyes = 2;
	this.body = 1;
	this.foot = 2;
}

const duckA = new Duck();
const duckB = new Duck();
const duckC = new Duck();

→ 하지만 이렇게 함수 안에서 선언해주면 메모리 측면에서는 총 9개가 쌓이게 된다.

이를 해결하기 위해서 prototype을 사용할 수 있다.

function Duck() {}

Duck.prototype.hair = 3;
Duck.prototype.eyes = 2;
Duck.prototype.body = 1;
Duck.prototype.foot = 2;

Duck.prototype.getType() = function () {
	return '예쁜오리';
}

const duckA = new Duck();
const duckB = new Duck();
const duckC = new Duck();

다음처럼 Duck이라는 함수의 Prototype Object에 멤버 변수로 eyes, body, foot 그리고 getType()을 추가할 수 있다.

만약 duckA을 이용해서 getType()의 return 값을 수정한다면, 멤버를 수정하는 것이 아니라 해당 객체(duck A)의 멤버로 추가할 수 있다.

...

duckA.prototype.getType() = function () {
	return '못난오리';
}

Prototype Chaining

위의 오리 이야기에서 duckA 객체에서 getType()이라는 함수를 찾을 때 duckA의 __proto__라는 Prototype link를 통해서 Duck Prototype Object에 있는 getType를 찾아서 호출한다.

그런데, 만약에 Duck Prototype Object에 getType()라는 함수가 없다면? __proto__로 상속 순서에 따라 차근차근 타고 올라가다보면 가장 최상단에 Object Prototype에 도달하게 된다.

Object prototype에서 상속된 메소드 중에 getType가 있다면 찾아서 호출하게 된다.

이렇게 선언된 객체에서 Prototype link를 이용해 상위 객체로 변수 또는 함수를 탐색해나가는 과정 을 Prototype Chaining이라고 한다.