[javascript] 자바스크립트 프로토타입(Prototype)만 쉽게 이해하기

"자바스크립트 그까이것 안배워도 대충 보고하면 되자나~ ?"

오래전 국내에서는 자바스크립트가 alert창이나 찍는 단순 스크립트언어로 무시(?) 받던 시절이 있었습니다.

하지만 자바스크립트로 서버사이드 코딩을 가능하게 하는 Node.js 의 유행이나 많은 UI 라이브러리와 프레임워크들이 범람하는 요즘에는 자바스크립트는 웹개발을 하는데 있어서 주요한 위치에 있습니다.

그러한 자바스크립트를 효율적이고 Clean한 코드작성을 위해서 많은 개념들이 필요한데 그러기 위해서 프로토타입은 꼭 알아야 하는것중 하나입니다.

프로토타입에 대한 좋은설명 자료들이 웹상에 이미 많이 있어서 읽었지만 이해를 못했습니다. (이해력이 부족함 T_T)

혹시 저처럼 혼돈을 맞는분들을 위해서 이 포스팅에서 다룰건 딱 하나 프로토타입에 대한 것 입니다.

1.자바스크립트의 프로토타입(Prototype)이란?

"함수를 선언할때 생성되고 해당 함수를 통해 생성되는 모든 객체들이 상속받는 객체이다."

자바스크립트에는 자바와 같은 클래스가 없습니다.  그렇기 때문엔 어떤Type을 통한 객체를 생성할때는 생성자함수 라는것을 이용합니다.

생성자함수라는 것은 특별한건 아니고 그냥 자바스크립트 함수 입니다. 단지 관례적으로 일반함수와 구분하기 위해 첫글자를 대문자로 쓸뿐 자바스크립트 함수와 다른것이 전혀 없습니다. 

function Human(name) {
    this.name = name;
}

위에는 name을 인자로 받는 Human 이라는 생성자함수를 선언했습니다. 이렇게 선언하는 순간 Human의 프로토타입객체가 어딘가에 생성되고 Human 이라는 함수와 연결이 됩니다.

크롬관리자 도구를 통해서 console.dir 로 확인해보면 Human함수안에 여러속성이 있습니다.

그중에  [[prototype]]이름의 속성이 참조하는 [[constructor]] ,[[__proto__]] 2개의 속성을 가지고있는 객체가  Human함수의 프로토타입객체 입니다.

 m2sj

그중 [[constructor]] 이라는 속성이 참조하고 있는건 Human생성자 함수입니다.

결국 Human 생성자함수에 [[prototype]]속성이 참조하고 있는것이 우리가 말하는 자바스크립트의 프로토타입이고 그 프로토타입객체 역시 [[constructor]]속성으로 자신의 생성자함수를 참조하고 있습니다.

결국 서로를 순환 참조하고 있는것입니다. (크롬 관리자 도구에서 함수를 열어볼때 끊임없이 펼쳐지는 이유이기도 합니다.)

그림으로 정리하면 아래와 같습니다.

2.프로토타입이랑 비슷해보이는 프로토(__proto__) 넌 누구냐?

"어떤 객체의 __proto__ 필드는 그객체를 생성한함수의 prototype 객체를 가르킨다."

아갑자기 어지러워지는 기분입니다-_-); 예제를 통해서 바로 확인해 보겠습니다.

Human 이라는 생성자함수로 TOM 과 Marry 객체를 만들겠습니다. 

이 두객체들도 console.dir 로 출력해보면

function Human(name) {
    this.name = name;
}
 
var girl = new Human("Marry");
var boy = new Human("TOM");
 
Human.prototype.sayName = function() {
    console.log("나의 이름은 " + this.name + " 입니다");
};
 
girl.sayName (); //나의 이름은 Marry 입니다
boy.sayName ();  //나의 이름은 TOM 입니다

최대한 알기쉽게 쓰려고 노력했는데 많이 부족하다는 생각이 드네요._ _);

본문에서는 가장 기본적인 부분만 설명하였습니다.

더 자세한 내용은 아래 링크를 참고 해주세요.

자바스크립트 상속과 프로토타입 더알아보기