[javascript] - 07 프로토타입과 클래스 - es6 class

오늘은 어깨운동을 했다. 나도 남들처럼 어깨에 코코넛 하나씩 달고 다니고 싶다.

원래 Class는 C++ java C# php 등 다른 언어에는 있었지만 javascript에는 없다가 es6문법이 나오면서 생기게 되었다.

이전 프로토타입 객체 상속 받기에서 했던걸 es6문법을 통해 좀 더 간결하게 작업을 해보려 한다. 사용하려는 문법은 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();

새로 보이는게 있다. 환영해주자.
constructor라는게 새롭게 추가가 됐는데
생성자라는 의미를 가지고 있다.

console.log(Animal.prototype.say);

ƒ say() {}
<constructor>: "Function"
name: "Function"

class를 사용함으로써 좀 더 편리한 점은 똑같이 say()라는 함수를 넣었을 때 class는 say()라는 함수를 따로 구현하고 class에 넣었을때 들어가는 순간 자동적으로 prototype으로 등록이 된다.

class 문법을 사용하면 상속을 해야하는 상황에서 훨씬 더 쉽게 할수 있다.

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("야옹이", "야옹");
const cat2 = new Cat("야오오옹이","야아아옹")

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

// 멍멍
// 야옹 
// 야아아옹

위 코드를 보면 extends와 super()가 새롭게 보인다. 하나하나 정리를 해보자면 extends는 뒤에 있는 특정 클래스를 상속받는다 라는 뜻을 가지고 있으며 안에 constructor만 선언해주면 된다.

먼저 extends 안에 있는 constructor는 기존에 Animal에서 사용했던 constructor를 덮어 쓸 예정이다.
이 과정에서 super()를 사용해서 Animal이 갖고 있는 constructor를 먼저 호출해주고 자신이 해야될 일을 처리할 수 있게 해준다.
이렇게 작성을 하면 const cat2처럼 또 추가해서 작성할 수도 있다.

다음 페이지에서 예제로 테스트를 해보려 한다.
화이팅...