[JS ES6]-[16] 상속 핵심만 이해하기(3) - class(클래스)

 

안녕하세요

이번 글에서는 자바스크립트에서의  상속 - (class) 핵심만 알려드리겠습니다.

 

1. 사용이유

es6에서 constructor를 구현할 때 사용합니다.

function으로 구현하는 상속이랑, 기능상 큰 차이는 없고 보기 쉽게 표현해 줍니다.

 

2. 사용방법

class my_class{
  constructor(name) {
    this.name = name;
  }
};

const class1 = new my_class('kim');

 

 

class는 constructor안에 this.name을 넣어줍니다.

그리고 함수(메서드)를 넣고 싶으면 constructor 안이나 바깥 중에 함수를 넣으면 됩니다.

class my_class{
  constructor(name) {
	this.name = name;

    //1. constructor 안
    this.say_name = function() {
      console.log(name);
    }
  }

  //2.constructor 바깥
  say_name() {
    console.log(name);
  }
};

constructor 안 ⇒ 자식 객체가 상속받습니다.

constructor 바깥 ⇒ my_class.prototype에 저장됩니다.

 

보통은 변수들은 constructor안에 넣고 함수들은 constrcutor 바깥에 놔둡니다.

 

3. extends

class를 상속받는 class를 만들 수 있습니다.

 

class Parent {
  constructor (name) {
    this.name = name
  }
}

class Child extends Parent {
  //....
}

이렇게 하면 Parent의 name 속성을 상속받는 클래스를 만들 수 있습니다.

 

4. super

4.1 constructor안에서의 super

위 코드에서 Child class에 age란 값을 추가해 보겠습니다.

 

class Parent {
  constructor (name) {
    this.name = name
  }
}

class Child extends Parent {
  constructor(name){
    this.name = name;
    this.age = '10';
  }
}

근데 코드를 잘 보니 중복이 발생합니다.

 

name이란 속성은 Parent class에도 있고, Child class에도 존재합니다.

중복을 제거하려면 super를 이용해 부모가 갖고 있는 값을 가져오면 됩니다.

 

class Child extends Parent {
  constructor(name){
    super(name);
    this.age = '10';
  }
}

여기서 super는 “extends로 상속한 부모 class의 constructor()”입니다.

 

4.2 prototype 함수 안에서의 super

super를 이용하면 함수도 상속이 가능합니다.

 

class Parent {
  say_hi() {
    console.log('hi');
  }
}

class Child extends Parent {
  say_hi_hi() {
    super.say_hi();
    console.log('hi');
  }
}

위처럼 super를 prototype 함수 안에서 쓰면, 부모 class의 prototype을 의미합니다.