class

1. class란?

class는 객체를 생성하기 위한 템플릿으로 생성자함수(porotype의 원리)로 동작을 하게 됩니다. 또한 이 class를 이용하면 prototype보다 더 간결하게 생성자 함수를 생성할 수 있습니다.

prototype

function Person(name, age) {
 this.name = name;
 this.age = age;
}

class

class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
}

2. 클래스와 인스턴스

생성자함수, class로 인스턴스를 생성할 때 new연산자를 활용해서 만들 수 있다는 점에서 크게 다를 것은 없습니다. 또한 single literal object도 객체이지만 하나의 인스턴스로 볼 수 있습니다.

자바스크립트의 생성자함수로 인스턴스를 만들어던 과정을 class를 활용해 리팩토링 해보도록 하겠습니다.

프로토타입

function Person(name, age, location) {
  this.name = name;
  this.age = age;
  this.location = location;
}
Person.porototype.getName = function name(params){
  return this.name + '입니다';  
}

Class를 활용한 리팩토링

class는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성이 됩니다.

class Person {
  constructor(name, age, location) {
    this.name = name;
    this.age = age;
    this.location = location;    //멤버변수
  }
  getName(){
    return this.name + '입니다';   //메소드
  };  
}

이렇게 class를 이용해 편리하게 사용을 할 수 있기에 생성자함수 보다는 class를 적극적으로 활용해 사용하기를 권장합니다.

또한 class는 이 외에도 프라이빗 키워드, 정적 메서드 등 수많은 기능들을 제공하며, react, vue에서도 class컴포넌트를 사용하기에 이 강력한 class를 잘 익혀두시길 바랍니다.

3. 클래스 확장

프로토타입

//super class
function Animal(name, sound) {
  this.name = name;
  this.sound = sound;
}

//기능 부여
Animal.prototype.getInfo = function () {
  return this.name + '가(이)' + this.sound + '소리를 낸다.'
}

//Sub class
function Friends(name, sound) {
  Animal.call(this, name, sound) //명시적 this 바인딩
}

//프로토타입 연결 : 연결이 안된다면 dog.getInfo()에 typeerror가 발생합니다.
Friends.prototype = Object.create(
  Animal.prototype,
)

클래스활용

//super class
class Animal {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }
  getInfo() {
    return this.name + '가(이)' + this.sound + '소리를 낸다.'
  }
}

//sub class
class Friends extends Animal {
  constructor(name, sound) {
    super(name, sound)   //super을 사용해 부모의 생성자함수를 호출합니다.
  }
}

이렇게 생성자 함수를 이용할 필요 없이 자바스크립트에서 제공하는 class를 사용해 확장을 쉽게 할 수 있습니다. 게다가 일종의 템플릿처럼 키워드들만 잘 활용해도 복잡한 내부동작을 굳이 코드로 구현하지 않아도 되기에, class를 적극적으로 활용해 사용하기를 권장합니다.