12. 생성자 함수의 업그레이드 버전, class

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 ES6 의 강력한 기능 중 하나인 class에 대해서 알아보겠습니다.

class는 생성자 함수의 업그레이드 버전이라고 보면 됩니다.

생성자 함수에 대해서 간단하게 살펴보도록 하죠.

function person (name, job) {
    this.name = name;
    this.job = job;
};
 
person.prototype.getName = function(){
    console.log(this.name);
};
 
function korean (name, job) {
    person.apply(this, arguments);
}
korean.prototype = new person();
 
var man_1 = new person('커쇼', '야구선수');
man_1.getName(); // 커쇼
 
var man_2 = new korean('류현진', '야구선수');
man_2.getName(); // 류현진
 

위의 코드의 첫 번째 줄에서 함수 person을 정의 했습니다. 함수의 내용은 함수를 생성자 함수로 호출했을때 생성되는 객체의 name, job 속성을 정의했습니다.

6번째 줄에서는 person 함수를 정의하면 자동으로 자바스크립트 내부에 생기는 person 함수의 프로토타입 객체에 getName 메소드를 정의 했습니다.

그리고  10번째 줄에서 korean 함수를 정의 하고, korean 함수내에서 person 함수를 간접 실행(this 바운딩)하여 person 함수의 name, job 속성을 사용할 수 있도록 했습니다.

13번째 줄에서는 korean 함수의 프로토타입 링크를 new person() 으로 생성된 객체로 변경했습니다.

(원래 korean 함수의 프로토타입 링크는 korean 함수의 프로토타입 객체를 참조)

이를 통해 korean 함수를 생성자로서 호출 했을 때 생기는 객체에 person 함수의 prototype 객체의 getName 메소드를 사용할 수 있도록 했습니다.

(생성자함수에 대해 좀 더 자세히 알아보고 싶으신 분은 아래의 링크를 참조해 주세요)

<생성자함수와 prototype 객체>

이렇듯 기존 자바스크립트에서는 생성자 함수와 프로토타입링크, 프로토타입 객체를 이용하여 메소드를 상속할 수 있었습니다.

하지만 ES6 에서는 class 를 이용해 메소드의 상속을 보다 쉽고 직관적으로 할 수 있습니다.

class의 표현식입니다.

class Polygon [extends extendsTarget]{
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class 에서 constructor 는 객체를 만드는 컨스트럭터로, 프로토타입의 컨스트럭터와 같은 역할을 합니다.

상속은 class를 선언할 때, extends 를 선언하고 그 뒤에 extends 할 class를 지정해 주면 해당 class를 상속합니다.

*언떤 클래스를 상속했을 경우, constructor 안에서 this를 사용하기 이전에 super([arguments]) 를 이용해 부모 클래스를 호출해 줘야 합니다.

ES6 class 를 이용한 메소드 및 속성의 상속에 대해서 예제와 함께 알아보겠습니다.

class Person {
    constructor (name, job) {
        this.name = name;
        this.job = job;
    }
    getName() {
        console.log(this.name);
    }
}
 
class Korean extends Person {
    constructor (name, job, position) {
        super(name, job);
        this.position = position;
    }
    getPosition() {
        console.log(this.position);
    }
}
 
var man_1 = new Person('커쇼', '야구선수');
man_1.getName(); // 커쇼
 
var man_2 = new Korean('추신수', '야구선수', '외야수');
man_2.getName(); // 추신수
man_2.getPosition(); // 외야수 

위의 코드의 첫 번째 줄에서 Person 클래스를 정의 했습니다.

class의 내부에 constructor 로 클래스가 생성자로 사용됐을 경우 생성될 객체에 부여할 속성을 정의했습니다.

그리고 constructor 아래에 (6번째 줄) 생성될 객체의 getName 메소드를 정의 했습니다.

11번째 줄에서는 Korean 클래스를 정의 했는데, 이 클래스는 Person 클래스를 상속 받습니다. (extends Person)

Korean 클래스의 constructor 에서는 생성될 객체에 Person 클래스가 지닌 속성과 Korean 만의 position 속성도 정의 했습니다. (14번째 줄)

*extends 를 이용해 상속받는 클래스의 constructor 내부에서 this 를 사용하려면 부모클래스를 호출해야 합니다.

(super() 를 이용해 부모클래스를 호출 - 13번째 줄)

그리고 Korean 클래스에만 존재하는 getPosition 메소드도 정의 했습니다. (16번째 줄)

man_1은 Person 클래스가 생성자로서 호출돼 만들어진 객체입니다. 

(name, job 속성을 가지고 있으며, getName 메소드를 가지고 있는 객체)

man_2는 Korean 클래스가 생성자로서 호출돼 만들어진 객체입니다.

(name, job,position 속성을 가지고 있으며, getName, getPosition 메소드를 가지고 있는 객체)

여기까지 ES6의 class 에 대해서 알아보았습니다.

기존 prototype 방식에서의 메소드 상속은

1. prototype 객체에 메소드를 정의

2. 상속받을 함수의 prototype link 를 생성자 함수를 이용해 변경

의 단계를 거쳐야 했지만,

ES6의 class 는 extends 를 이용해 간단하게 메소드를 상속받을 수 있습니다.

지금까지 ES6의 시리즈 글을 12 편 적어 정리해 보았습니다. 

추후에 ES6 관련해 포스팅할 내용이 있으면 넘버링을 붙이지 않고 포스팅 하도록 하겠습니다.

지금까지 따라와 주셔서 감사하고, 글을 읽는 분들께 조금이나마 도움이 되길 바라면서 이만 마치겠습니다.

행복한 하루 되시길 바랍니다.

**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes#Class_%EC%A0%95%EC%9D%98

짱구의 기술블로그 - Chap27. 알쓸 ES6 

https://appear.github.io/2018/03/14/JavaScript/javascript_28/

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)