자바스크립트는 프로토타입 기반 언어라고 불립니다.

Prototype

프로그램에서는 아주 많은 비슷한 객체들이 존재하고 이 객체들은 아마도 각각 다른 속성을 가지고 있습니다. 하지만 그들 중에도 공통으로사용하는 속성과 메소드가 있겠죠.

JavaScript에서는 이렇게 객체 간에 공유되어야 하는 속성과 메소드를, 프로토타입이라는 기능을 이용해 효율적으로 저장합니다.

  • 사전적 의미: “원형” “원래의 모습”
  • 말 그대로 무엇의 원형을 나타내는지 생각해보면 될것.

prototype vs Class

자바스크립트에는 클래스라는 개념이 없습니다. 대신 프로토타입이라는 것이 존재합니다.
클래스가 없으니 기본적으로 상속도 없습니다. 그래서 프로코타입을 기반으로 상속을 흉내내도록 구현합니다.

최근의 ES2015에서 class 문법이 추가되었습니다. 하지만 문법이 추가되었다는거임… 자바스크립트가 클래스 기반으로 바뀌었다는 것은 아닙니다.

Prototype Link와 Prototype Object

자바스크립트에는 Prototype Link와 Prototype Object라는 것이 존재합니다. 그리고 이 둘을 통틀어 Prototype이라고 부릅니다.

Prototype Object

객체는 언제나 함수(Function)로 생성됩니다.

1
2
function Person() {} // 함수
let personObject = new Person(); // 함수로 객체 생성

personObject 객체는 Person이라는 함수로 생성된 객체입니다. 언제나 객체는 함수에서 시작됩니다.

함수랑 전혀 상관없는 코드로 보이지만 서로 같은 코드입니다.

1
2
let obj = {};
let obj = new Object();

위 코드는 Object가 자바스크립트에서 기본적으로 제공하는 함수입니다.
Odject와 마찬가지로 function, Array도 모두 함수로 정의되어 있습니다.

함수가 정의될 때는 2가지 일이 동시에 이루어집니다.

1. 해당 함수에 Constructor(생성자) 자격 부여

Constructor 자격이 부여되면 new를 통해 객체를 만들어 낼 수 있게 됩니다. 이것이 함수만 new 키워드를 사용할 수 있는 이유입니다.

2. 해당 함수의 Prototype Object 생성 및 연결

함수를 정의하면 함수만 생성되는것이 아니라 Prototype Object도 같이 생성이 됩니다.

[출처: [Javascript ] 프로토타입 이해하기]

읽은 자료 (혹은 참고한 링크)

[Javascript ] 프로토타입 이해하기