prototype

Now, Sophia·2021년 8월 23일

TIL_JAVASCRIPT

목록 보기

13/15

▶︎ prototype

prototype은 자바스크립트에만 있고, 자바스크립트의 객체지향을 지탱하고 있는 원형(원래의 형태)이다.
prototype을 통해 상속을 받을 수 있다.

	function KoreanFood(){};
	KoreanFood.prototype.taste = "맛있다";

	function AsiaFood(){};
	AsiaFood.prototype = new KoreanFood();
	
	function Food(){};
	Food.prototype = new AsiaFood();

	const mycountryfood = new Food();

	console.log(mycountryfood.taste); // "맛있다"

✓ `taste` 라는 프로퍼티가 없는데❓

위의 예제를 보면 "Food"라는 객체에는 "taste" 라는 프로퍼티가 없다.
그런데 어떻게 "Food"에서 "taste"라는 프로퍼티의 값인 "맛있다"를 불러왔는가?

상기의 Food 객체는 생성자 함수를 통해 만들어진 객체이다.
생성자 함수를 통해 만들어진 객체는 단순히 비어있는 객체가 아니라 protoptype 이라는 객체를 자동으로 갖는다.
이 prototype이라는 객체를 통해 데이터를 상속받아 출력을 하는 것이다.

Food객체에는 taste의 값이 정의되 않아 내부적으로 Food의 prototype이 가리키고 있는 부모인 AsiaFood객체로 가서 값을 확인.
AsiaFood에도 값이 정의되지 않아 AsiaFood의 prototype이
가리키고 있는 부모인 KoreanFood에서 정의된 taste 프로퍼티의 값을 가지고 오게 된 것이다.

객체에서 데이터 가져 올 때, 기본적으로 자바스크립트는 해당 객체에서 값을 찾는다.
그 값이 정의되어 있으면 바로 출력하지만, 없으면 상위 객체에서 찾고, 또 없으면 최상위 객체에서 찾게 된다.
이것을 prototype chain 이라고 한다.

✓ 부모의 prototype & 자식의 prototype

부모에게 프로퍼티를 추가하면 자식에게는 없지만, 해당 프로퍼티의 값을 가지고 올 수 있다.

function MakeFood(){
  this.김치찌개 = '짜다';
  this.된장찌개 = '맛있다';
}
MakeFood.prototype.밥 = '딱딱하다';

let student = new MakeFood();

console.log(student); // {김치찌개 : "짜다", 된장찌개 : "맛있다"}
console.log(student.밥); // {밥 : "딱딱하다"}

student에는 밥이라는 프로퍼티가 없기 때문에 student의 키 개수는 '2' 가 된다.

function MakeFood(){
  this.김치찌개 = '짜다';
  this.된장찌개 = '맛있다';
}
MakeFood.prototype.밥 = '딱딱하다';

let student = new MakeFood();

console.log(student); // {김치찌개 : "짜다", 된장찌개 : "맛있다"}
console.log(student.밥); // {밥 : "딱딱하다"}

const count = Object.key(student).length;
console.log(count); // 2