2. Javascript ES2015 (5) - 클래스 [1/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);

 

 

위의 내용은 기본적인 프로토타입 기반의 클래스 구조 구현 양식입니다. 구조를 간단하게 먼저 훑어보겠습니다. Human이라는 생성자 함수를 선언하고, 그다음 Human을 상속하는 개념의 Zero 생성자 함수를 선언했습니다. 그리고 Zero 생성자 함수를 이용해 oldZero 객체를 선언하는 구조네요. 

 

그렇다면 포인트는 Human을 상속하는 Zero를 선언하는 방법이 되겠습니다. 우선, 첫 번째로 아래 라인을 보겠습니다. 

 

Human.apply(this, arguments);

 

 

Zero를 선언할 때 가장 먼저 나오는 라인입니다. 기억하는 분들도 있겠지만, 이는 Zero를 통해 객체를 생성할 때 Zero의 부모인 Human 생성자 함수도 호출하기 위해서 추가된 라인입니다. Javascript 챕터에서 이 내용을 다루었었죠.

 

 

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

 

 

자, 위 Javascript 챕터에서 설명하던 방식으로 해당 라인을 살펴보겠습니다. 여기서 첫 번째 파라미터인 this는 무엇을 의미할까요? 잘 생각해보면 이 라인은 생성자 함수 Zero내에 있는 라인입니다. 결국 여기서 사용된 첫 번째 파라미터 this는 생성자 함수 Zero를 통해서 새롭게 생성되는 객체를 의미합니다. 여기서는 oldZero가 되겠네요. 

 

그럼 이 oldZero, 즉 첫 번째 파라미터 this는 [Human이라는 생성자 함수 내에서 선언된 this]에 바인딩됩니다. this가 this에 바인딩되었다고 설명하면 헷갈리니, oldZero가 Human 생성자 함수 내의 this에 바인딩되었다고 생각하면 됩니다. 그럼 결과적으로 oldZero 내에서 type이라는 프로퍼티가 선언되는 결과를 가져옵니다. 

 

그럼 두 번째 파라미터인 arguments는 어떻게 될까요? 이 부분 역시 생성자 함수 Zero가 new 키워드로 실행될 때 전달된 파라미터를 받게 됩니다. 그런데 잘 보면 생성자 함수 Human은 type이라는 파라미터 한 개를 받습니다. 그렇기 때문에 아래 라인에서 파라미터 3개가 전달되지만, 자연스럽게 첫 번째 파라미터만 생성자 함수 Human에 전달됩니다. 

 

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

 

 

자, 여기까지는 생성자 함수 Zero가 Human을 상속받기 위한 표면적인 동작과 프로퍼티를 설정하는 과정이었습니다. 이제는 프로토타입 연계가 필요합니다. 이를 위해서는 Object.create( )에 대한 이해도 필요합니다. 기억이 나지 않는다면, 아래 아티클도 다시 한번 복습하시기 바랍니다. 

 

 

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