프로토 타입(Prototype)

출처 :  https://www.nextree.co.kr/p7323/

JavaScript : 프로토타입(prototype) 이해

• 자바스크립트는 클래스 라는 개념이 없다 , 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다
• 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어 낸다
• 객체를 탐조하는 prototype 속성 , 객체 맴버인 proto 속성이 참조하는 숨은 링크가 존재한다.

그림 1

[소스 1]

function Person(){}

• 속성이 하나도 없는 Person 함수 정의 , 파싱 단계에 들어가면 Person 함수는 Prototype 속성은 프로토 타입 객체를 참조한다.

그림 2

[소스 2]

function Person() {}

var joon = new Person();
var jisoo = new Person();

• 자바 스크립트에서는 boolean , number , string , null , undefined 빼고는 모두 객체이다
• 사용자가 정의한 함수도 객체 , new 연산자를 통해 생성된 것도 객체
• 객체 안에는 proto 속성이 있다. 이 속성은 객체가 만들어 지기 위해 원형인 프로토타입 객체를 숨은 링크로 참조하는 역활을 한다.
• 프로토타입 객체는 함수를 정의하면 다른곳에 생성되는 프로토타입 객체는 다른 객체의 원형이 되는 객체이다.

그림 3

[소스 3]

function Person() {}

var joon = new Person();
var jisoo = new Person();

Person.prtotype.getType = function(){
 return "인간";
};


console.log(joon.getType()); // 인간
console.log(jisoo.getType()); // 인간

• prototype 속성을 이용하여 맴버를 추가하였다
• 프로토타입 객체에 getType()이라는 함수를 추가하면 맴버를 추가하기 전에 생성된 객체에서도 추가된 맴버를 사용할 수 있다
• 추가,수정,삭제 할 때는 함수 안의 Prototype 속성을 사용 해야한다. 프로토타입 맴버를 읽을때는 Prototype 속성 또는 객체 이름으로 접근 해야 한다.

그림 4

[소스 4]

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

console.log(joon.getType()); // 사람
console.log(jisoo.getType()); // 인간

jisoo.age = 25;

console.log(joon.age); // unefined
console.log(jisoo.age);// 25

• 프로토타입 원형 기본값이 getType() 이 인간이기에 jisoo는 원형으로 출력이 된다.

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

console.log(jisoo.getType()); // 사람

• [소스 5] 를 보면 프로토타입 객체는 새로운 객체가 생성되기 위한 원형이 되는 객체이다.
• 프로토타입 객체를 맴버를 읽는 경우 객체,함수 의 prototype 속성을 통해 접근할 수 있다.