자바스크립트 생성자와 관련된 Prototype에 대해 알아보겠다.

Prototype

prototype 객체는 사전 그대로 원형을 뜻한다. 원래의 모습이다.
같은 생성자로부터 만들어진 객체들은 모두 이 원형 객체를 공유한다.

자바스크립트는 프로토타입 기반 언어라고도 불릴 만큼 자바스크립트에서 중요한 요소이다.
프로토타입을 언제 쓰는 것일까?

앞서 배웠던 생성자 함수를 통해 객체를 만들어 내는 함수들을 배웠다.
이 때 생성자 함수는 각 객체의 값과 공통으로 사용할 메소드들을 만들어낼 수 있도록 그것들이 정의되어 있었다.

function Person(name, first, second){
  this.name = name;
  this.first = first;
  this.second = second;
  this.sum = funtion(){                  // 생성자 함수 메소드
    return this.first + this.second;
  }
}
var kim = new Person('kim', 10, 20);
var lee = new Person('lee', 10, 10);

위의 예제처럼 우리는 생성자 함수를 통해 객체의 틀(?)을 정의해 놓고 그것을 new과 함께 호출함으로써 객체를 만들었다.
그 안에는 일반적인 data값도 있고 메소드도 있다.

Prototype을 언제 사용할까?

하지만 이런 호출방법은 객체가 생성될때마다 메소드를 호출해야하기 때문에, 만약 객체가 1000개가 있다면 생성자함수의 메소드는 1000번이 호출될 것이다.
메모리가 낭비가 되며 성능이 저하된다.
이 때 Prototype을 사용하게되면 좀 더 효율적으로 프로그래밍을 할 수 있다.

위에서 설명했듯이 같은 생성자로부터 만들어진 객체들은 모두 prototype을 공유하기 때문에 위의 예제에서 Person에 prototype 객체에 새로운 메소드를 넣게되면 모든 Person 생성자로 만든 모든 객체는 이 메소드 사용이 가능하다.

function Person(name, first, second){
  this.name = name;
  this.first = first;
  this.second = second;
  }
Person.prototype.sum = funtion(){      // Prototype객체 사용
    return this.first + this.second;
}
var kim = new Person('kim', 10, 20);
var lee = new Person('lee', 10, 10);

위의 예제에서 생성자 함수 안의 메소드를 밖으로 빼주었다.
이렇게 되면 메소드 함수를 한번만 실행되기 때문에 불필요한 메모리의 낭비가 없어진다.

따라서 일반적으로 Data속성은 생성자 함수안에, (Prototype안에 넣는 경우도 있음)
메소드들은 Prototype객체에 넣는다.

이렇게 Prototype을 통해 생성자 함수로 만든 모든 객체의 메소드들을 정의할 수도 있고, 수정할 수도 있다.

하나의 객체 메소드만 바꾸고 싶다면?

만약 생성자 함수로 만들어진 객체 중 하나의 객체만 메소드를 바꾸고 싶다면
그 객체에 같은 이름의 함수를 다른 내용으로 정의한다.
그렇게 하더라도 그 수정한 객체의 메소드만 변경될 뿐 다른 객체에는 영향이 가지 않는다.
왜냐하면 객체.함수()를 실행할 때, 그 객체 자신안에 함수가 있는지 먼저 확인하고 없다면 Prototype에 메소드가 정의되어 있는지 확인하기 때문이다.

function Person(name, first, second){
  this.name = name;
  this.first = first;
  this.second = second;
  }
Person.prototype.sum = funtion(){      // Prototype객체 사용
    return this.first + this.second;
}
var kim = new Person('kim', 10, 20);
kim.sum = function(){
  return this.name;               // kim 객체에만 sum이름으로 다른 메소드 정의
var lee = new Person('lee', 10, 10);

참고자료
생활코딩
제로초블로그