Prototype

자바스크립트는 java, c++ 와 달리 prototype 기반의 객체지향 프로그래밍 언어이다. 클래스 기반 객체지향 언어에서는 먼저 클래스를 정의하고 인스턴스를 생성하는데 자바스크립트에서는 생성자 함수를 이용해 인스턴스를 생성하고 prototype cain을 통해 부모에게서 필요한 부분을 상속받는다.

자바스크립트에서는 객체를 생성하면 항상 prototype이라는 속성이 추가된다. 생성자 함수를 만들어보자.

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

함수를 만들면 항상 prototype 이라는 속성이 있고 Person.prototype.constructor는 자기 자시을 가리킨다. 그 다음 인스턴스를 만들어보자.

const person1 = new Person('foo') //Person {name: "foo"}
const person2 = new Person('boo') //Person {name: "boo"}

그런데 인스턴스에 새로운 속성를 추가하고싶다면 어떻게 해야할까? 먼저 인스턴스에 각각 속성을 추가해 줄수 있다.

person1.getName = function() {
  return this.name
};

person2.getName = function() {
  return this.name
};

하지만 인스턴스가 많아지면 이런방법은 매우 비효율적이다. 이럴때 prototype을 사용한다. 부모의 prototype을 이용해 함수를 추가해보자.

Person.prototype.getName = function() {
  return this.name
};

person1.getName()//"foo"
person2.getName()//"boo"

Prototype Chain

인스턴스에서 어떤 속성을 사용하려고 할때 자신에게 그 속성이 없으면 부모의 prototype에 접근해서 그 속성을 가져와 사용하게된다. 자신에게 없으면 자신의 부모 그 부모에도 없으면 그 부모... 이런식으로 타고 올라가는 것을 prototype chain 이라고 한다. scope cain 과 매우 비슷하다.

또한 부모 prototype에 추가된 속성은 해당 생성자 함수로 생성된 모든 인스턴스가 사용 할 수 있다. 또 다른 예를 들어보자.

const a = [];
//이는 다음과 같다
const a = new Array();

a라는 배열는 정확하게 말하면 Array 생성자 함수의 인스턴스이다. 배열이나 객체를 만들면 항상 사용할 수 있는 메서드가 제공된다.

const a = [];

a.indexOf();

a라는 배열에 indexOf라는 메서드를 추가 한적이 없는데 어떻게 메서드를 사용할 수 있을까? 여기서 Array.prototype을 확인해 보면

Array.prototype에 indexOf라는 속성이 있는것을 확인 할 수 있다. 부모에 해당 속성이 있기 때문에 prototype chain을 통해 그 속성을 사용 할 수 있게된다.