개발햄비

[javaScript] javascript protoType이란 (1) 본문

개발/javaScript

[javaScript] javascript protoType이란 (1)

개발햄 2019. 3. 19. 21:22



protoType란  

객체 생성의 모체라는 뜻입니다.



function person(){

}

var minsu = new person();
var hanbi = new person();

person.prototype.getType = function(){
return "사람";
}

console.log(minsu.getType()); // 사람 출력
console.log(hanbi.getType()); // 사람 출력



protoType 객체에  getType()이라는 함수를 추가하면

다른 사람들을 생성할 때 추가된 사람들도 사용할 수 있습니다.


같은 protoType을 이용한 minsu , hanbi 객체는 

getType()을 이용할 수 있습니다. 


hanbi.getType = function (){
return "키큰사람";
};

console.log(minsu.getType()); // 사람
console.log(hanbi.getType()); // 키큰사람

minsu.age = 30;

console.log(minsu.age); // 30
console.log(hanbi.age); // undefined


이와같이 객체 사용하게 되면 person의 프로토타입 객체를 수정하는 것이 아니라 minsu 또는 hanbi 객체를 수정한 것입니다.

                       


minsu는 person의 protoType을 보고 있기 때문에 사람이 나오고 hanbi는 hanbi객체의

getType()을 보고 있기 때문에 "키큰사람"이 출력 됩니다.



이와 마찬가지로 age의 경우도 minsu객체의 age를 바라봐 "30"이 출력되지만

hanbi객체의 경우 person 함수의 protoType에는 age가 존재하지 않기 때문에 undefined가 출력됩니다.


따라서 이를


person.prototype.getType = function (){
return "키큰사람";
};

console.log(minsu.getType()); // 키큰사람



이와 같이 person.prototype.getType을 다시 "키큰사람"으로 수정해주면 

person 함수의 protoType.getType()을 바라보고 있던 minsu객체에서는 다시 " 키큰사람 "이 출력되게 됩니다.



protoType객체는 새로운 객체가 생성되기 위한 원형이 되는 객체 입니다 .

같은 원형으로 생성된 객체가 공통으로 참조하는 공간입니다 .프로토타입 객체의 멤버를 읽는 경우에는 객체 또는 함수의 protoType 속성을 통해 접근할 수 있습니다. 하지만 추가, 수정, 삭제는 함수의 protoType 속성을 통해 접근해야 합니다. 


코드의 재사용을 생각하면 떠오르는 것이 java에서는 상속이라는 개념입니다.

클래스 개념이 있는 자바에서는 중복된 코드를 상속받아 코드 재활용이 가능해집니다. 하지만 javaScript에서는

클래스가 없는 protoType 기반 언어이기 때문에 protoType 을 잘 이용하면 코드를 재사용 할 수 있습니다.



참고자료 :  http://www.nextree.co.kr/p7323/