본문 바로가기
자바스크립트와 캔버스

자바스크립트 일반메소드 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의 매소드를 추가하는 방법도 다뤄보도록 하겠습니다:)

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

반응형