[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션 - 26강 프로토타입과 클래스

프로토타입

객체생성자

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

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('개', '토토', '멍멍'); //객체생성자를 불러올때는 new를 붙여줌
const cat = new Animal('고양이', '루루', '미야우');

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

여기서 새로운 Animal이 만들어질때마다 새로운 함수가 만들어지고 있는데 계속 같은 내용의 함수가 두번이나 선언이 되고 있다. say라는 함수를 바깥으로 꺼내 프로토타입을 써서 재사용 해보자.

프로토타입

function Animal(type, name, sound){ //객체생성자는 대문자로 시작
    this.type = type;
    this.name = name;
    this.sound = sound;
} 
Animal.prototype.say = function(){
    console.log(this.sound);
}
const dog = new Animal('개', '토토', '멍멍'); //객체생성자를 불러올때는 new를 붙여줌
const cat = new Animal('고양이', '루루', '미야우');

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

객체생성자로 만든 것에 어떤 함수를 계속 재사용 하고 싶을 때는 프로토타입으로 위처럼 만들어주면 된다…(고 하는데 사실 이해가 아직 잘 안감)

객체생성자 상속받기

아래와 같은 코드가 있다고 하자.

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

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

두개의 객체생성자와 함수가 거의 똑같은데 두번이나 쓰는게 비효율적이다. 이럴 경우에 상속받게 써주는게 객체생성자의 상속이다.
아래와 같이 수정해보자.

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

function Dog(name, sound){
  Animal.call(this, '개', name, sound);
}
function Cat(name, sound){
  Animal.call(this, '고양이', name, sound);
}

Dog.prototype = Animal.prototype;
Cat.prototype = Animal.prototype;

const dog = new Dog('멍멍이', '멍멍');
const cat = new Cat('야옹이', '야옹');

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

대충 방법은 알겠는데 이게 효율적인지는 잘 모르겠다..?
실질적인 예시가 주어져야 좀 더 이해가 쉬울 것 같다.
일단은 넘어간다.

클래스 (ES6)

우리가 방금 위에서 한 작업을 알기쉬운 문법으로 구현하게 해준다.

class Animal{
  constructor(type, name, sound){ //constructor는 생성자라는 의미.
      this.type =type;
      this.name = name;
      this.sound = sound;
  }
  say(){
      console.log(this.sound);
  }
}

class Dog extends Animal{ //extends는 class Animal을 상속받아온다 라는 뜻.
  constructor(name, sound){
    super('개', name, sound);//super는 자신이 상속받은 키워드를 불러올때 쓰는 키워드.
  }
}
class Cat extends Animal{
  constructor(name, sound){
    super('고양이', name, sound);
  }
}

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

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

위와 같이 클래스를 쓰기 위해서 그 위에 객체생성자랑 프로토타입을 배운거 같다. 아직도 역시 어떻게 활용하는지는 감이 잘 안오지만 필요할때 찾아보는 걸로 하자.

연습 Food Class

class Food{
  constructor(name){
      this.name = name;
      this.brands = [];
  }
  addBrand(brand){
      this.brands.push(brand)
  }
  print(){
      console.log(`${this.name}을 파는 음식점들 : `);
      console.log(this.brands.join(', '));
  }
}
const pizza = new Food('피자');
pizza.addBrand('피자헛');
pizza.addBrand('도미노피자');

const chicken = new Food('치킨');
chicken.addBrand('굽네치킨');
chicken.addBrand('비비큐');

pizza.print(); 
chicken.print();

마치면서

여기까지 하면 react로 프론트앤드 개발을 하거나 node로 백엔드를 개발할 수 있을 정도의 기초는 배운 것이라고 한다. 앞으로 개발해나가면서 모르는 부분이 있으면 찾아보고 하면서 채워나가면 된다고.. 알고있으면 유용한 문법..을 지금 할까 나중에 할까 고민중 ㅎㅎ 일단 들어가보자! 고고..
시청 영상 26강 31~34까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp