prototype

ryeon5789·2021년 8월 23일
1

TIL_JAVASCRIPT

목록 보기
13/15
post-thumbnail

▶︎ 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의 값이 정의되 않아 내부적으로 Foodprototype이 가리키고 있는 부모인 AsiaFood객체로 가서 값을 확인.
AsiaFood에도 값이 정의되지 않아 AsiaFoodprototype
가리키고 있는 부모인 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

생활코딩- prototype이란?

코딩애플- 자바스크립트 prototype문법



🙋🏻‍♀️ Today,

틈틈히 알아보았던 prototype.
아직 잘 모르지만 기본개념을 위해 짤막하게 적어보았다.

영상을 보면서 짤막하게 정리하던 차에,
부모의 프로토타입에 프로퍼티를 추가했을 경우, 자식의 프로퍼티 갯수는 어떻게 되는지 궁금했다.

부모의 prototype에 추가된 property는 자식의 property에 추가되지 않는다는 것을 알게 되었다.

당연히 아직 잘 모르기 때문에 실제로 현장에서는 prototype은 어떻게 쓰이는지 궁금하다.

prototype은 모든 객체에 있기 때문에 한번만 만들어진다.
그래서 객체와 객체를 연결함으로써 불필요한 메모리 낭비가 없다고 한다.
많이 구글링 해봐야겠다.

profile
Whatever you want

0개의 댓글