티스토리 뷰

WEB/Javascript

프로토타입과 클래스

이지홍 2022. 9. 28. 16:57
반응형

프로토타입과 클래스에 대해 알아보기 전 우선 객체 생성자라는 것을 먼저 알아야한다.

객체 생성자 

함수를 통해서 새로운 객체를 만들고 그 안에 넣고싶은 값 혹은 함수들을 구현 할 수 있게 해준다. 

function Animal(type, name, sound) {
	this.type = type;
    this.name = name;
    this.sound = sound;
    this.say = function() {
    	console.log(this.sound);
    };
}
const dog  = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say();
cat.say();

결과: 
멍멍
야옹

객체 생성자를 사용할 때는 보통 함수의 이름을 대문자로 시작하고 새로운 객체를 만들때에는 new 키워드를 앞에 붙여주어야 한다.

지금 위 코드를 보면, dog가 가지고 있는 say함수와 cat이 가지고 있는 수행하는 코드가 똑같음에도 불구하고 객체가 생성 될 때마다 함수도 새로 만들어져서 this.say로 설정이 되고 있다.

같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는데 이것이 바로 프로토타입이다.

프로토타입

프로토타입은 다음과 같이 객체 생성자 함수 아래에 .prototype.[원하는 키]= 코드 를 입력하여 설정 할 수 있다.

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}
Animal.prototype.say = function() {
  console.log(this.sound);
};
Animal.prototype.sharedValue = 1;

const dog  = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say();
cat.say();

결과 
멍멍
야옹
1
1
반응형
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/09   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함