2. Javascript ES2015 (5) - 클래스 [2/2]

 

 

 

 

앞서 살펴본 클래스 관련 내용을 이어서 계속 알아보도록 하겠습니다. 앞선 내용에서는 새로운 클래스 문법이 아닌 기존 프로토타입 문법을 살펴보고 있었습니다. 이 중, 부모 클래스의 생성자를 호출하는 내용까지 살펴보았죠. 

 

 

var Human = function(type){
    this.type = type || 'human';
};

Human.isHuman = function(human){
    return human instanceof Human;
};

Human.prototype.breathe = function(){
    alert('h-a-a-m');
};

var Zero = function(type, firstName, lastName){
    Human.apply(this, arguments);
    this.firstName = firstName;
    this.lastName = lastName;
};

Zero.prototype = Object.create(Human.prototype);
Zero.prototype.constructor = Zero;

Zero.prototype.sayName = function() {
    alert(this.firstName + ' ' + this.lastName);
};

var oldZero = new Zero('human', 'Zero', 'Cho');
Human.isHuman(oldZero);

 

 

이번에는 create( )함수 사용 영역을 살펴보도록 하겠습니다. 기존 Javascript 학습 내용 중 아래 챕터에서 이 내용을 다루었습니다. 

 

13. Javascript 객체지향 프로그래밍(2) - 프로토타입 상속 구현 1

 

 

Object.create( ) 함수에 대한 정의가 설명되었죠? 결론만 정리하자면, Human을 상속하는 Zero를 생성하는 과정에서 필요한 구조입니다. Object.create(Human.prototype)을 실행하게 되면, Human.prototype을 [[Prototype]]으로 상속하게 되는 새로운 객체 - new F( ) - 를 생성하게 됩니다. 그리고 이 객체를 Zero.prototype에 대입하게 되지요. 이 과정을 통해서 Zero는 Human을 상속하게 되는 것입니다. 

 

해당 구조는 아래 아티클의 그림을 참조하시면 됩니다. 

 

13. Javascript 객체지향 프로그래밍(3) - 클래스 기반 상속 구현 4

 

 

 

 

---

 

 

 

그런데, 우리는 이 과정에서 Human.apply와 Object.create를 사용하는 부분에 대한 설명에 꽤 많은 시간을 할애했습니다. 그만큼 복잡한 과정이라는 의미죠. 이제, ES2015+의 클래스 문법으로 위 코드를 대체해 보겠습니다. 

 

코드 구조는 Human 클래스 선언 - Human을 상속하는 Zero 클래스 선언 - Zero 인스턴스 생성입니다. 

 

 

class Human {
    constructor(type = 'human'){
        this.type = type;
    }

    static isHuman(human){
        return human instanceof Human;
    }

    breathe(){
        alert('h-a-a-m');
    }
}

/* 
var Human = function(type){
    this.type = type || 'human';
};

Human.isHuman = function(human){
    return human instanceof Human;
};

Human.prototype.breathe = function(){
    alert('h-a-a-m');
};
*/

class Zero extends Human {
    constructor(type, firstName, lastName){
        super(type);
        this.firstName = firstName;
        this.lastName = lastName;
    }

    sayName(){
        super.breathe();
        alert('${this.firstName} ${this.lastName}');
    }
}

/*
var Zero = function(type, firstName, lastName){
    Human.apply(this, arguments);
    this.firstName = firstName;
    this.lastName = lastName;
};

Zero.prototype = Object.create(Human.prototype);
Zero.prototype.constructor = Zero;

Zero.prototype.sayName = function() {
    alert(this.firstName + ' ' + this.lastName);
};
*/

const newZero = new Zero('human', 'Zero', 'Cho');
Human.isHuman(newZero);

 

기본적으로 prototype 함수들은 클래스 안에 기본적으로 선언하는 형태가 되었습니다. Human.isHuman같은 클래스 함수는 static으로 선언되었고, 상속도 다른 언어처럼 extends 형식으로 진행되었습니다. 생성자 함수 선언 시에 = function( ) 타입으로 선언하던 부분도 명시적으로 constructor를 사용해 생성자 함수로 정리했습니다. 

 

다만, Javascript 고유의 프로토타입 기반 상속 자체는 변하지 않았다는 점을 기억하세요.