[🐱 자바스크립트] 프로토타입 [prototype]

자바스크립트와 프로토타입

🍎 프로토타입 기반 언어 자바스크립트

• 프로토타입은 자바스크립트의 객체 지향을 지탱하고 있는 핵심 기반이다.

프로토타입
자바스크립트의 객체 지향적 특성 중 하나인 상속을 가능하게 하는 구체적인 수단

프로토타입을 통해 상속이 가능해지고, 상속을 통해 객체 지향성을 가질 수 있다.

---

프로토타입이란

🍎 프로토타입은 객체의 원형을 의미한다.

prototype은 말 그대로 '원형', '원형 객체' 라는 의미를 담고있다.
아래 코드를 보면 이해하기 더 쉽다.

prototype 프로퍼티에는 객체의 원형이 담겨있다.

✅ __proto__ 키워드를 통해 부모 클래스의 프로토타입을 확인 할 수 있다.

✅ .prototype 키워드를 통해 프로토타입 프로퍼티에 접근한다.

프로토타입 예제

function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();

function Sub(){}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp) // true
console.log(Sub.prototype === o.__proto__) //true

생성자(Ultra, Super, Sub )는 함수에 해당한다.

이 함수를 호출하는데 앞에 new를 붙여주면 단순한 함수가 아닌 생성자 함수가 되는 것이고,
실행된 결과는 새로운 객체를 만들어서 O 변수 안에 리턴해주준다.

🗯 이 때, 우리가 얻고자 하는 객체의 원형은 어딘가에 저장되어 있는데 prototype이라 하는 프로퍼티에 저장되어 있는 것이다.

Sub 함수는 객체이기 떄문에 프로퍼티를 가질 수 있고,
Sub.prototype = new Super();
그 중 특수한 프로퍼티인 prototype 안에는 어떠한 객체가 정의되어 있는 셈이다.

그렇게 객체를 저장해뒀다가 new 로 생성자를 호출하게 되면 그 객체를 꺼내다가 리턴해주는 방식이다.

---

🍎 생성자와 빈 객체의 차이점은?

prototype은 객체의 원형이라고 했다.

따라서 빈 클래스의 프로토타입을 호출한다면 new Object(); 객체를 선언한 것과 사실상 동일하게 빈 객체를 가진다.

function func(){}
func.prototype //func {}

이는 new Object();를 출력한 값과 동일하다.

new Object(); //Object {}

빈 객체 안에 name 키와 ‘egoing’ 이라는 값을 주게 되면 키 값이 출력되는 것을 확인할 수 있다.

var o = new func();
func.prototype.name = ‘egoing’
o // func{name:”egoing”}

💡 빈 생성자의 프로토타입 객체 원형은 일반적으로 객체를 선언, 초기화하여 만든 빈 객체와 동일한 값({ })을 갖지만
일반 객체와의 차이점은 객체를 생성할때 그 객체가 가지고 있어야 할 데이터, 메서드, 프로퍼티 값이 주어진다.
그 객체 안에는 함수의 로직 및 데이터가 담겨있다.

---

prototype chain

프로토타입들이 서로를 참조하면서 연결되어 있는 형태

Sub.prototype은 new Super()의 객체를 가리킨다.
이 객체는 다시 Super.prototype을 가리키고 이 프로토타입은 new Ultra(); 객체를 가리킨다.

이런 방식으로 프로토타입이 서로 연결되어있는 것을 프로토타입 체인이라고 부른다.

프로토타입 체인은 상속과도 관련이 있다. 상속을 구현하는 과정에서 프로토타입이 체인처럼 구현되기 때문이다.

[상속 관련 포스팅]
https://velog.io/@bommy5799/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D

[출처] 생활코딩 - https://opentutorials.org/course/743/6573