[바이트]에서 전하는 JavaScript Prototype 활용

자바스크립트의 prototype 속성은 최상위클래스인 Object 클래스가 가지고 있는 속성(멤버)이다. prototype의 역할은 클래스에 대한 속성이나 메소드를 추가할 수 있게 해준다. 만약 자바스크립트에서 클래스를 생성하게 되면 모든 클래스는 prototype을 상속받아서 활용할수가 있게 된다. 이번 강좌(팁)을 활용하려면 다음의 이해가 필수적이다.

1. 클래스와 상속의 개념

2. 자바스크립트에서의 클래스 개념과 생성 및 사용

prototype을 사용하면 모든 클래스가 사용가능한 메소드를 만들어 낼수 있다.

다음의 예를 보면

<!doctype html>

<head>

var arr=new Array(10,20,30,40,50);

var arr2=new Array("test1", "test2", "test3", "test4", "test5");

function myobj(pa, pb, pc){

this.ma=pa;

this.mb=pb;

this.mc=pc;

}

Object.prototype.output=function(){

for(var temp in this){

if(this.hasOwnProperty(temp))

document.getElementById("view_area").innerText+=this[temp];

}

window.addEventListener("load", function(){

arr.output();

arr2.output();

var temp=new myobj(100,200,300);

temp.output();

},false);

</script>

</head>

<body>

</body>

</html>

우선 배열을 두개 만들어냈는데, 숫자와 문자열을 저장하고 있다.

그다음 클래스를 기존 버전의 자바스크립트로 정의하였다.(최근 ECMA6을 적용한 형태는 브라우저간 호환성이 있을 수 있어서 기존 버전형태로 작성했다.)

특별할 것 없이 단순하다.

그다음 최상위 객체인 Object객체에 prototype속성을 활용하여 상속가능한 멤버메소드를 정의했다.

Object.prototype.output=function(){

for(var temp in this){

if(this.hasOwnProperty(temp))

document.getElementById("view_area").innerText+=this[temp];

}

위의 prototype정의를 확인하면 output메소드를 추가한 것이 보인다. 여기에서는 for ~ in을 사용하여 output메소드를 상속한 객체 인스턴스로 부터 멤버를 추출하고 있다.

최대한 단순화 시키기 위해 body 태그안에 한개의 div태그를 사용하여 모든 내용을 출력하고 있다.

이때 분기문으로 hasOwnProperty(변수)를 사용하였는데, hasOwnProperty()메소드의 역할은 현재 객체인스턴스가 매개변수로 지정된 내용을 멤버로 소유하고 있는지 여부를 반환한다. 만약 멤버라면 true를 리턴할 것이고, 그냥 상속받았거나, 멤버가 아니라면 false를 리턴한다.

따라서 this.[temp]는 현재 인스턴스의 멤버만을 리턴하게 된다.

hasOwnProperty()메소드를 사용한 결과

만약 hasOwnProperty()메소드를 사용하지 않는다면 다음과 같이 출력된다.

hasOwnProperty()메소드 제외 결과

따라서, 해당 객체의 인스턴스 멤버만 출력하려면 hasOwnProperty()메소드를 함께 사용해야만 한다.

만약, 이미지 배열이나 텍스트 배열 등을 포함하여야 할 경우와 출력해야할 태그(div, p)가 다를 경우에는 다음과 같이 만들어주면 된다.

Object.prototype.output=function(pid){

for(var temp in this){

if(this.hasOwnProperty(temp))

document.getElementById(pid).innerText+=this[temp];

}

이렇게 되면 id값이 지정된 태그에 해당 내용이 출력될 것이다.

만약, 출력해야 할 내용이 이미지와 텍스트 등 서로 다른 태그 형태일 경우에는 어떻게 하면 될까?

객체인스턴스의 경우 첫번째 멤버를 "image", "text" 등의 값으로 지정하고 분기문으로 비교하여 해당 되는 것을 실행하도록 하면 될 것이다.

배열의 경우라면 인덱스 0에 "image", "text"등의 값으로 지정하여 분기문으로 비교하면 된다.

이부분에 대한 것은 추후 작성해보기로 하자