Prototype

prototype은 객체지향의 상속을 구현하기위해 JavaScript에 존재합니다. ES6부터 JavaScript에도 Class가 도입되었지만, 프로토타입을 다른 언어들의 클래스쓰듯이 이용할수 있게 모양만 만들어둔 것입니다. 이름, 형태만 클래스이지 내부는 프로토타입입니다.

일단 prototype을 어떻게 쓰는지 코드로 봅시다.

function Person() {}
Person.prototype.hands = 2;
Person.prototype.legs = 2;
var kim = new Person();

new 키워드를 쓰는 걸 보면 다른언어의 클래스와 흡사합니다. 이름만 class에서 function으로 바뀌었다고 해도 될듯합니다.

자세히 들어가봅시다.
Prototype을 알려면 Prototype Link와 Prototype Object이 두가지를 잘알면 됩니다.

Prototype Object

“객체는 언제나 함수로 생성됩니다.”
다른 언어를 쓰다 넘어오면 아주 헷갈리는 개념입니다. 그리고 모양새를 봐도 헷갈립니다. var kim = new Person(); new로 생성하는데? 함수로 생성한다고? 생각하실수 있습니다.

Person() 함수에 new를 붙여서 객체를 생성했습니다. “JavaScript에서는 함수에 new를 붙이면 생성자 함수가 됩니다.“ 아주 간단하게 new를 붙임으로 써 함수가 다른 언어들의 클래스가 하듯이 객체를 생성합니다. 어떠한 함수도 new를 붙이면 생성자 함수가 되기 때문에 함수의 맨 앞글자를 대문자로 표현함으로 써 일반 메서드와 생성자 함수를 구분합니다.

// 일반 메서드 
function getAge() {}
// 생성자 함수 
function Person() {}

추가로 설명해드리면 var obj = {};를 많이 이용하실텐데,

// 아래 3가지는 모두 같습니다.
var obj = {};
===
var obj = new Object();
===
Object = function Object() {}

JavaScript에서 Object는 함수입니다.
그리고 Number, String, Date 도 함수입니다. 그래서 Date를 이용할 때 new Date();부터 작성하고 시작하는 거죠.

Prototype Chain, Link (proto)

프로토타입은 proto 속성을 통해 다른 프로토타입과 연결됩니다.
JS에선 객체의 프로퍼티(데이터)나 메서드에 접근할 때 해당 프로퍼티, 메서드가 없으면 [[Prototype]]을 따라 올라가서 확인합니다. 상속의 특성을 말하는 것입니다. 현재 객체에 값이 없다면 상속받은 객체로 올라가 찾는 다는 것이죠.

var kim = {
	job: 'student',
	age: 18
};
console.log(kim.hasOwnProperty('job')); // true

kim을 선언할 때 hasOwnProperty() 메서드를 정의하지 않았음에도 작동합니다. 작동하는 이유는 모든 객체가 상속받고 있는 Object.prototype이 ‘hasOwnProperty()’를 가지고 있기 때문입니다.