2.2 class의 기본 선언

이전 포스팅에서 자바스크립트는 프로토타입 기반의 언어라는 말을 했었습니다. 그리고 es6에서 출현한 class 또한 이 기반 위에서 변화된 형태입니다. 그럼 기존의 프로토타입으로는 어떤식으로 클래스를 표현했는지 비교해보겠습니다.

(이 글은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes 내용을 바탕으로 작성하였습니다.)

class.js

function Cat(name) {
  this.name = name;
}
 
Cat.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
};
 

이와같이 function으로 작성을 하였습니다. 위 코드를 보면 Cat이라는 함수가 있고 그 함수(객체)를 c라는 변수에 선언합니다.

그럼 c 변수는 Cat 자료형에 있는 speak라는 함수에 접근이 가능해집니다. 아마 class를 아시는 분들이라면 new 연산자 얘기를 많이 들어보셨을 겁니다. 쓰는 방법은 다른데 거의 기존에 알던 class랑 비슷하게 동작을 하고 있죠.

그럼 es6에 추가된 class로는 어떻게 바뀌는지 알아보겠습니다.

class.js

class Cat{
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
 

똑같은 동작을 하는데 기존에 class에 대한 개념을 좀 안다면 이해가 되는 구문으로 바꼈습니다. 

Constructor에 대한 설명은 다음과 같습니다.

Constructor (생성자)섹션

constructor 메소드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메소드입니다.  "constructor" 라는 이름을 가진 특수한 메소드는 클래스 안에 한 개만 존재할 수 있습니다. 만약 클래스에 한 개를 초과하는 constructor 메소드를 포함한다면, SyntaxError 가 발생할 것입니다.

class에 대한 얘기를 할 때 꼭 나오는 단어가 상속 이라는 단어인데요 기존에 작성된 클래스를 재사용하는 방법이죠.

자바에서는 extends라는 키워드로 클래스를 상속받는데요 자바스크립트에서도 동일합니다.

class.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

class Animal {    constructor(name) {     this.name = name;   }      speak() {     console.log(this.name + ' makes a noise.');   } }   class Dog extends Animal {   speak() {     console.log(this.name + ' barks.');   } } Colored by Color Scripter

cs

Animal이라는 부모클래스를 상속받는 Dog 클래스를 정의하였습니다. 모든 동물은 이름을 갖지만 울음소리는 동물마다 상이합니다. 그래서 자식클래스에서 speak() 함수에 대한 내용만 재정의해서 사용을 하면 적어도 이 코드에서는 생성자를 중복해서 정의해야하는 코드중복을 피할 수 있게 됩니다. class의 사이즈가 커지고 중복되는 부분이 많다면 굉장히 효율적이겠죠.

또한 super 키워드를 통해 자식클래스에서 부모클래스를 호출할 수 있습니다.

class.js

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}
 
class Dog extends Animal {
  speak() {
    super.speak();
    console.log(this.name + ' barks.');
  }
}

Dog 클래스는 Animal 클래스를 상속받았으므로 super 키워드를 이용하면 Animal 클래스의 speak 함수가 호출됩니다.

객체지향 프로그래밍을 해보신 분들이라면 거의 동일한 모양을 하고있기때문에 더 쉽게 이해가 가실거라 생각합니다.