JS 개념들 - 프로토타입과 클래스

Class vs Function Constructor

클래스 개념은 2015 ES6 부터.
initializer 메서드 역할을 하는 constructor 메서드가 있고,,

프로토타입과 클래스

객체 생성자

• 객체 생성자: 함수를 통해 객체를 만들고 이를 이용하는 것.
  • 이의 경우, 내부의 재사용 할 수 있는 내부의 함수 혹은 값을 프로토 타입이라고 한다.

• 객체 생성자의 예시

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();

프로토타입은 객체 생성자 함수 아래 따로 설정을 해줄 수 있음.

• 프로토타입 설정 예시

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);

객체 생성자 상속받기

cat dog이라는 새로운 객체 생성자를 만드는 경우, Animal의 기능을 재사용할 수 있음.

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;

function Dog(name, sound) {
  Animal.call(this, '개', name, sound);
}
Dog.prototype = Animal.prototype;

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

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

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

새로 만든 객체 생성자(cat, dog)에서 상위 객체 생성자를 상속받으려면

• Animal.call()을 통해 기본적인 변수를 상속받고
• Animal.prototype 또한 할당해준다.

Class

es6부터 js에 class 문법 지원. 덕분에 객체 생성자로 구현했던 것들을 보다 손 쉽게 class로 구현 가능.

클래스로 객체 구현

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

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

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

클래스 내부의 함수들은 자동으로 prototype으로 등록이 된다.

클래스의 상속

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

class Dog extends Animal {
  constructor(name, sound) {
    super('개', name, sound);
  }
}

class Cat extends Animal {
  constructor(name, sound) {
    super('고양이', name, sound);
  }
}

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

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

위에서 super()는 상속 받은 클래스의 생성자를 의미

practice

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('BBQ');

pizza.print()
chicken.print();