[TIL] Javascript Prototype

Javascript Prototype

프로토타입이란?

• 프로토타입은 “원형”이라는 뜻이다.
• 원형의 사전적 의미는 다음과 같다.

  같거나 비슷한 여러가지가 만들어져 나온 본바탕
  ex) 불교 문화의 영향을 받은 이 건축물은 후대 건축물의 원형이 됐다.

• 따라서 어떤 객체의 프로토타입이란, 그 객체의 ‘원형’을 뜻한다.

---

var object = new Object();

객체는 함수로 생성된다. 함수가 생성 되면 2가지가 생긴다.

1. 생성자
2. 프로토타입 객체

여기서 프로토타입 객체를 살펴보겠다.
프로토타입 객체 내부에는

1. 생성자
2. 프로토타입 링크가 존재한다.

프로토타입 객체 내부의 생성자에는, 어떤 생성자로 인해 객체가 선언 됐는지가 나와있다.
프로토타입 객체는 함수만 가지고 있다.
프로토타입 링크(__proto__)는 모든 함수가 가지고 있다.
프로토타입 링크에는 조상의 프로토타입 객체가 있다.

예시를 들면서 설명 해 보겠다.

---

function Person(){
    this.first = "Bae";
    this.last = "Sonia";
}

Person.prototype = {
    getFullName(){
        return this.first + this.last;
    }
}

Person이라는 함수는 성과 이름을 프로퍼티로 가지고 있다.
함수를 선언 하고, 프로토타입에 성과 이름을 합쳐 리턴하는 getFullName() 함수를 선언했다.

Person.prototype을 출력 해 보면 다음과 같이 나온다.

Person의 prototype 객체에는 getFullName이라는 함수와 프로토타입 링크를 가진다.

prototype 객체는 말 그대로 ‘객체’이기 때문에 프로토타입 링크에 객체의 생성자와 그 메소드들을 담고 있다.

getFullName은 함수이다.
따라서 생성자와 프로토타입 링크를 가진다.
함수이기 때문에 함수 생성자를 가질 것이고, getFullName의 부모 객체인 함수 객체를 프로토타입 링크에 담고 있을 것이다.

함수 프로토타입 객체의 프로토타입 링크는 Object 객체이다.
이 Object도 함수이기 때문에 생성자와 프로토타입 링크를 가진다.
즉, 모든 객체, 함수의 최상위 프로토타입은 "객체"이다.

---

JS는 프로토타입 기반 언어이다.
객체 지향 언어와는 다르지만, 객체 지향에서 쓰이는 생성자, 상속 등을 프로토타입으로 비슷하게 구현할 수 있다.

또한 객체 내부에 함수를 따로 선언 할 필요가 없이, 프로토타입으로 선언을 해 주면, 객체를 생성하기만 하면 함수를 사용할 수 있으므로 메모리의 낭비를 줄일 수 있다.