[생활코딩] 객체지향 - prototype

한글로는 prototype을 어떤 사물의 공통된 모습, 본래의 모습을 의미한다.

자바스크립트를 프로토타입 기반 언어라고 부를만큼 자바스크립트의 기반이다.

 

function Person(name, first, second){
  this.name = name;
  this.first = first;
  this.second = second;
  this.sum = ()=> this.first + this.second;
  
}

var kim = new Person('kim',10 ,20);
var lee = new Person('kim',30 ,20);

console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());

kim을 만들때 Person을 생성자로 동작한다.

생성자가 실행될때마다 this.sum() 함수가 만들어지고 있다.

지금은 두 개지만 만약에 1억의 객체를 생성한다고 한다면,

저 sum함수를 생성하는 시간과 메모리가 그 만큼 낭비가 된다.

즉, 성능저하의 원인이 되는것이다.

 

 

kim객체가 sum 함수를 변경하려고 한다.

 

이게 원했던거면 괜찮지만 이게 아니라 Person이라는 생성자를 사용하는 모든 객체의

sum함수를 바꾸고 싶다면 아래 작업을 객체가 1억개라면 1억번을 해야된다.

kim.sum = function(){
	return 'modified : ' +(this.first + this.second);
}

이것이 생성자 안에서 메소드를 갖는것의 단점이다. (생산성이 떨어진다.)

Person 이라는 생성자가 만드는 객체가 공통적으로 사용하는 함수, 속성을 만들수있어야 된다.

---

생성자를 통해서 만든 객체 모두가 공통적으로 사용하는 속성을 만드는 방법을 알아보자.

 

Person이라고 하는 생성자 함수안에 sum()를 정의하는것이 들어가있지 않기때문에

정의하는 코드가 객체가 만들어질때마다 실행되지 않는다.

한 번만 실행이 되므로 성능을 절약할 수 있고, 메모리도 절약할수있다.

 

그리고 중요한 효과는 저 sum이라는 함수를 1억개의 객체가 있다고 했을 때 같이 share할 수 있다.

수정하니까 수정된 결과가 출력된다.

 

그리고 또 흥미로운것은 1억개중에 kim이라는 객체의 sum 메소드만 다르게 동작시키고 싶다면,

다음과 같이 하면 된다.

kim만 this가 나오고 나머지는 prototype으로 나온다.

 

자바스크립트는 kim이라는 객체의 sum 메소드를 호출할 때 가장 먼저 그 객체 자신이

sum이라는 속성을 가지고 있는지를 찾는다.

그래서 저 속성을 실행시키고 끝낸다.

 

 

하지만 lee객체는 sum이라는 메소드를 정의한적이 없으므로,

자바스크립트는 객체 생성자인 Person의 프로토타입에 sum 메소드가 정의되어있는지를 찾는다.

 

데이터, 변수들은 생성자 안에 넣는것이 일반적이다.

함수는 특별한 이유가 있는게 아니라면 생성자.prototype.함수이름 으로 만들어준다.

그게 일반적으로 constructor를 이용해서 객체를 생성할 때 사용되는 일종의 패턴이다.

 

 

정리하자면

1. 프로토타입은 객체를 정의하는 시점이 아닌, 필요한 시점에 정의할 수 있기 때문에 메모리의 이점이 있다.

2. 프로토타입은 생성 된 모든 객체가 공통으로 사용할 수 있고 재정의가 가능하기 때문에 커스텀마이징도 가능하다. 

 

---

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.