[JavaScript] Class & Super

ES5 VS ES6

Javascript 에서 ES6 이전까지의 버전에는 class라는 개념이 존재하지 않았다.

ES5까지는 OOP를 구현하기 위해서 다양한 연구가 이루어졌고, 그중에서 대표적인 것이 Pseudoclassical Style이다.

ES6에서 Class 개념이 등장을 하였고, 다른 언어에서 넘어온 개발자라도 쉽게 적응할 수가 있게 되었다.

마찬가지로 Javascript 에서 시작하는 개발자는 Class 문법을 배운다면 다른 객체지향 언어에서도 쉽게 적응할 수가 있게 되었다.

Pseudoclassical과 Class

Pseudoclassical과 Class 두 가지 방법을 사용한 인스턴스 생성 코드를 비교해보자

ES5 : 생성자 함수 작성. new 키워드를 사용해 인스턴스(객체) 생성

ES6 : class 키워드 사용. 내부에 생성자 함수 작성. new 키워드를 사용해 인스턴스(객체) 생성

 

Pseudoclassical

function Student(name, math, english){
    this.name = name
    this.math = math
    this.english = english
}
Student.prototype.sum = function(){
    return this.math + this.english
}

var john = new Student('john', 10, 20)
var patric = new Student('patric', 10, 10)

john.sum()      // 30
patric.sum()    // 20

Class

class Student{
    constructor(name, math, english){
        this.name = name
        this.math = math
        this.english = english
    }
    sum(){
        return this.math + this.english
    }
}

var john = new Student('john', 10, 20)
var patric = new Student('patric', 10, 10)

john.sum()      // 30
patric.sum()    // 20

공통점

두 가지 방법 모두 new operator를 사용하여 인스턴스를 생성한다.

생성된 인스턴스의 __proto__를 따라가 보면 생성자가 함수인지, 클래스 인지도 확인 가능하다.

 

차이점

Pseudoclassical Style에서는 인스턴스를 만들기 위해 생성자 함수를 작성했다. javascript 에서 모든 함수는 생성됨과 동시에 객체인 Prototype Object를 생성하게 되고, Prototype Object의 프로퍼티로는 contructor()와 __proto__ 이렇게 두 가지를 가지게 된다.

constructor() 프로퍼티 : 자신을 생성한 생성자 함수가 들어가게 된다.

__proto__ 프로퍼티에 : Prototype Link라고 불리며, 상위의 객체를 가리킨다.

 

Class에서는 이러한 constructor() 함수가 내부에 에서 사용자에 의해 작성이 되며, 초기값을 세팅하기 위한 예약어로 사용이 된다

클래스(Class)

기본적인 클래스 사용 문법 중 신경 써야 할 부분은 다음 두 가지이다.

▶ Class 내부에 contructor() 예약어 사용

▶ Class 내부에서 메서드를 작성할 경우, function 키워드를 사용하지 않음

 

1. Constructor()

class Student{
    constructor(name, math, english){
        this.name = name
        this.math = math
        this.english = english
    }
}

클래스 내부에 constructor() 함수를 사용하였다

constructor() 함수는 인스턴스(객체)를 만들 때, 해당 인스턴스가 생성되기 전에 호출되기로 약속되어 있는 예약어이다.

new operator를 사용해서 인스턴스를 만들게 되고, 인스턴스가 만들어지기 전에 constructor() 함수가 호출된다.

쉽게 생각해서 인스턴스 생성 시에 전달받은 파라미터 값으로 초기값을 세팅을 해준다고 생각하면 된다.

 

2. Function Keyword

class Student{
    constructor(name, math, english){
        this.name = name
        this.math = math
        this.english = english
    }
    sum(){
        return this.math + this.english
    }
}

javasript에서 함수를 작성할 때나 메서드를 작성할 때에 function 키워드를 사용하는 것이 일반적이다.

하지만 클래스 내부에서 메서드를 작성할 때에는 function 키워드가 사용되지 않는다.

클래스 상속(Class Inheritance)

클래스의 상속에 대해 이해하려면 extends와 super 키워드에 대해 이해할 필요가 있다.

 

extends

상속받을 클래스명을 class 키워드 뒤에 적고, extends 키워드를 사용. 마지막에는 부모 클래스명을 적는다.

 

super

super 키워드에는 두 가지 기능이 있다. 두 가지 기능 모두 코드의 재사용 측면에서 효율적이다.

 

1. super 뒤에 괄호()가 붙을 경우 : 부모 클래스의 생성자의 constructor()를 실행시키게 되고, 자식 클래스의 constructor() 내부에 동일하게 세팅. 추가로 세팅할 값들만 작성함으로써 부모 클래스 코드의 재사용 가능

class Student{
    constructor(name, math, english){
        this.name = name
        this.math = math
        this.english = english
    }
    sum(){
        return this.math + this.english
    }
}
class StudentExtend extends Student{
    constructor(name, math, english, science){
        super(name, math, english)
        this.science = science
    }
}

2. super 뒤에 점(.) 이 붙을 경우 : 부모 클래스에 접근해서 부모 클래스의 메서드 사용 가능

class Student{
    constructor(name, math, english){
        this.name = name
        this.math = math
        this.english = english
    }
    sum(){
        return this.math + this.english
    }
}
class StudentExtend extends Student{
    constructor(name, math, english, science){
        super(name, math, english)
        this.science = science
    }
    sum(){
        return super.sum() + this.science
    }
}

var lee = new StudentExtend('lee', 10, 20, 30)
lee.sum()   // 60

위에서처럼 StudentExtend 클래스에서 부모 클래스인 Student 클래스의 sum() 메서드를 이용해 새로운 sum() 메서드를 만들 수 있다.