프로토타입이란?
프로토타입은 공통적으로 사용하는 객체들을 모은 원형이다.
- 프로그래밍을 하다보면 공통적으로 사용하는 데이터들이 존재한다.
- 공통화된 코드들을 추상화 해 재사용성을 늘린것이 프로토타입이다.
- 모든 객체들은 프로토타입을 가지고 있다.
- 프로토타입을 만들어 객체와 객체를 연결하는 행위를 상속이라 한다
추상화: 프로그래밍에서 필요한 속성만 간추려 내어 표현한 것
프로토타입은 식별자.__proto__로 접근가능하다.
JavaScript의 내장 프로토타입 확인해보기
const num = [ 1,2,3]
console.log(num.length) // 2
console.log(num.__proto__)
숫자 배열 num을 선언하고 length를 호출해봤다. 그리고 결과 2라는 값이 도출되었다.
보다시피 숫자 배열만 선언했고 메서드는 선언한 적이 없다.
선언한적이 없는 length나 sort등 메서드를 어떻게 사용할 수 있을까? 이것은 자바스크립트에서
기본적으로 지원하는 프로토타입 덕분이다. 자바스크립트는 내장된 프로토타입을
모든 객체에 상속해 필요한 메서드들을 지원한다. 덕분에 우리는 선언한적이 없는 메서드를
간편하게 사용할 수 있다.
객체와 객체를 연결하면 어떤 이점이 있을까?
코드의 재사용성
const jihun = {
name: "jihun"
};
const education = {
college: "OO 대학교",
state: "졸업"
};
const skills = {
js: "상",
react: "상"
};
education.__proto__ = jihun;
skills.__proto__ = jihun;
console.log(education); // {college: "OO 대학교", state: "졸업", name: "jihun"}
console.log(skills); // {js: "상", react: "상", name: "jihun"}
위의 객체 데이터를 보면 education과 skills가 있다.
이 두 데이터에는 공통화된 프로퍼티가 존재하는데 바로 name이다.
name이라는 프로퍼티를 공통화 된 객체로 만들어 양 객체에 __proto__로 접근해 프로토타입에
객체를 상속시켰다.
때문에 education과 skils에 불 필요하게 반복적인 프로퍼티를 작성할 필요가 없어
코드 작성량이 줄어드는 이점이 있다.
메모리 절약
프로토타입의 상속 장점은 원본 하나의 데이터를 통해 메모리 절약이 가능하다.
const education = {
name:"jihun",
college: "OO 대학교",
state: "졸업"
};
const skills = {
name:"jihun",
js: "상",
react: "상"
};
console.log(education); // {college: "OO 대학교", state: "졸업", name: "jihun"}
console.log(skills); // {js: "상", react: "상", name: "jihun"}
위와 같이 사용할 경우 객체 내에 매번 프로퍼티를 생성하므로 반복되는 데이터를 메모리에 저장하는 형태가 된다. 때문에 메모리 낭비가 크다.
반면 프로토타입은 원본 객체를 통해 참조한다. 때문에 하나의 원본 저장소를 두고 활용하기 때문에 반복되는 데이터를 매번 생성하지 않아 메모리 낭비를 줄일 수 있다.
