자바스크립트 일반메소드 vs 프로토타입

자바스크립트에는 클래스라는 개념이 없기 때문에, 함수를 마치 클래스처럼 사용합니다.

​보통 다음과 같이 사용할수가 있는데요. 아주 간단한 형태의 클래스 선언입니다.

function craySample2Class() {
	this.message="달린다2";
	this.run = function(){
		alert(this.message);
	}
}

이 클래스는 클래스의 프로퍼티(property)로서,

message 요소가 하나 정의되고,

아울러 run 이라는 메소드(method)가 정의됩니다.

​이 클래스를 통해 객체 선언하는 문장은 아래와 같습니다.

var craySample2 = new craySample2Class();

그러면, craySample2 라는 객체가 생성되고,

craySample2.message 에 "달린다2" 값이 입력,

craySample2.run() 메소드를 실행하면 화면에 "달린다2"를 찍어주게 되는 것이지요.

​

위 내용이 사실 자바스크립트 클래스의 핵심이라고 해도 다를 바가 없습니다.

​

그런데 보통 자바스크립트에서 프로토타입을 사용하면 메모리가 절약된다고 하는 말이 있는데요. 그것은 맞는 말입니다.

프로토타입이란 무엇일까요?

앞과 똑같은 동작을 하는 소스를 소개합니다.

메시지만 "달린다2"에서 "달린다"로 변경된 것 외에는 아무 차이가 없는데요.

function craySampleClass() {
	this.message="달린다";
}
craySampleClass.prototype.run = function(){				
	alert(this.message);
}

이 소스가 어떻게 메모리를 절약할 수 있는 것일까요?

우선 객체를 단 한개만 사용한다면 전혀 해당 사항이 없습니다.

var craySample = new craySampleClass();

프로토타입은 사용하는 것으로 메모리가 그냥 적용되는 것이 아니기 때문입니다.

메모리가 절약되는 것은 객체를 2개 이상 선언하여 사용하는 경우에 해당합니다.

var craySampleA = new craySampleClass();
var craySampleB = new craySampleClass();
var craySampleC = new craySampleClass();
       :

왜 그런 것일까요?

그것은 바로 메소드가 메모리를 차지하는 비중 때문입니다.

​

전자의 클래스는 객체가 3번 선언되면 메소드도 메모리에 3번 선언됩니다.

​

반면 후자의 경우 객체가 3번 선언되더라도 객체에 딸린 message는 비록 3번 메모리 비중을 차지하지만, 메소드는 1번만 메모리를 차지하고, 모든 객체가 해당 메소드를 공유해서 사용하는 것이지요.

​

prototype 라는 단어가 "원형"이란 의미입니다.

즉, craySampleClass 클래스의 run 메소드라는 원형은 1번만 선언하고,

각 객체가 craySampleClass 에 의해 생성되더라도 run 메소드는 새로 생성되는게 아니라 원형의 메소드를 가져다 쓰는 것입니다.

​

그렇기 때문에 프로토타입을 사용하면 메모리가 절약된다고 하는 것입니다.

객체가 아주 많은 경우 프로토타입을 사용하지 않으면 속도가 매우 느려집니다.

아주 많은 자바스크립트 객체를 다루고자 할 경우 필요한 기술이지요.

​

웹에서 가장 많이 쓰이는 jQuery 라이브러리도 거대한 프로토타입으로 구성된 라이브러리입니다. jQuery 자체가 클래스이기도 하지요.

다음번에 또 다를 기회가 되면 jQuery의 매소드를 추가하는 방법도 다뤄보도록 하겠습니다:)

​

여기까지 읽어주셔서 감사합니다.