[javascript] - 07 프로토타입과 클래스 - 객체 생성자

스타벅스 x 케이스티파이 아이폰 13 pro 케이스를 선착순 구매에 성공했지만 리셀이 조금은 붙을줄 알았는데 허허.... 그대로다....

객체 생성자란?

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

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와 cat이 새로 생성될 때마다 say 함수도 계속 불러와져서 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();

console.log(dog.sharedValue);
console.log(cat.sharedValue);

// 멍멍
// 야옹

// 1
// 1

sharedValue도 Animal에 prototype으로 작성했기 때문에 재사용이 가능하다.