[js] javascript 에서 class 사용하기

오늘은 javascript의 class에 대해 정리해 보려 한다.

 

class

 

class는 javascript에서 ES6 이후 생긴 개념이다.

정리된 내용을 보시면 알겠지만 여러분들이 객체지향 언어에서 사용하시는 그 클래스다.

 

아래 예시를 보자.

class User {
  constructor(name, age, gender) {
    this.name = name;
    this.age =age;
    this.gender = gender;
  }
  getName() {
    return this.name;
  }
  getAge() {
    return this.age;
  }
  getGender() {
    return this.gender;
  }
}

const user1 = new User('kang', 33, 'M');
console.log(user1.getName());
console.log(user1.getAge());
console.log(user1.getGender());

 

class 는 이런식으로 내부에서 생성자를 통해 객체가 만들어지고 해당 메서드나 프로퍼티에 객체를 통해 접근해서 사용하는 방식으로 사용된다. 클래스내에 정의한 메서드는 해당 클래스의 프로토타입으로 저장된다.

 

만약에 생성자 함수를 통해 정의한다면 아래와 같이 정의 될 수 있을 것이다.

const User = function (name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
User.prototype.getName = function () {
  return this.name;
}
User.prototype.getAge = function () {
  return this.age;
}
User.prototype.getGender = function () {
  return this.gender;
}

const user1 = new User('kang', 33, 'M');
console.log(user1.getName());
console.log(user1.getAge());
console.log(user1.getGender());

 

Class를 이용한 상속

 

이전에 내가 prototype을 이용해 상속을 구현하는 방법을 포스팅 했었다.

https://devkingdom.tistory.com/334

[JS] javascript 의 prototype과 상속

class를 이용이면 더 직관적이고 객체지향 스럽게 상속을 구현할 수 있다.

아래 예시를 보자.

class Mammal {
  constructor(name) {
    this.name = name;
    this.feetNum = 4;
  }
  move() {
    console.log("움직이다");
  }
  eat() {
    console.log("먹다");
  }
}

class Cat extends Mammal {
  attack() {
    console.log("공격하다");
  }
}

const cat1 = new Cat("야옹이");

위에 보시면 알겠지만 Cat에 있는 메서드 attack, 그리고 Mammal 의 메서드 move와 eat이 Prototype Chain으로 연결되어서 사용될 수 있는 것을 볼 수 있다.

 

오버라이딩

 

일반적인 객체지향 언어처럼 생성자 오버라이딩 혹은 메서드 오버라이딩을 할 수 있다.

class Cat extends Mammal {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  attack() {
    console.log("공격하다");
  }
  move() {
    console.log("날렵하게 움직이다.")
  }
  eat() {
    super.eat();
    console.log("소화하다.");
  }
}

const cat1 = new Cat("야옹이", 3);
console.log(cat1);
cat1.move();
cat1.eat();

생성자 오버로딩 시에는 super를 호출해 상속받은 클래스의 속성을 가져온다.

 

마찬가지로 메서드 역시 super를 호출해서 상속받은 클래스의 메서드 기능을 가져올 수 있다. 만약에 메서드의 기능을 추가하는경우라면 이런식으로 사용하면 된다. eat 메서드를 참고하자.

 

메서드 오버라이딩을 통해 아예 기능을 변경해버릴 수도 있다. super 없이 그냥 원하는 기능을 구현해주면 된다. move 메서드처럼 말이다.

 

오늘은 javascript의 class 에 대해 알아보았다.

 

잘 정리해서 실무에서 잘쓰도록 하자.

 

끝.