Class

javascript의 class

상속을 받을때에 생성자 자체가 아니라 prototype 객체 내부의 요소들이
인스턴트에 상속을 받는다고 생각할수있다. 상속이라고 말하지만 사실 프로토타입 체이닝에 의한 참조이다.
인스턴스가 상속이 된다면 스태틱 멤버,
상속이 되지 않는다면 프로토타입 멤버라고 부를수있겠다.

ES5에서 상속을 하는 방법 3가지

//1. 인스턴스 생성후 프로퍼티 제거
var extendClass1 = function(SuperClass, SubClass, subMethods){
    SubClass.prototype = new SuperClass();
    for(var prop in SubClass.prototype){
        if(SubClass.prototype.hasOwnProperty(prop)){
            delete SubClass.prototype[prop];
        }
    }
    SubClass.prototype.consturctor = SubClass;
    if(subMethods){
        for(var method in subMethods){
            SubClass.prototype[method] = subMethods[method];
        }
    }
    Object.freeze(SubClass.prototype);
    return SubClass;
};
//2. 빈 함수를 활용
var extendClass2 = (function() {
    var Bridge = function (){};
    return function (SuperClass, SubClass, subMethods){
        Bridge.prototype = SuperClass.prototype;
        SubClass.prototype = new Bridge();
        SubClass.prototype.consturctor = SubClass;
        Bridge.prototype.consturctor = SuperClass;
        if(subMethods){
            for( var method in subMethods){
                SubClass.prototype[method] = subMethods[method];
            }
        }
        Object.freeze(SubClass.prototype);
        return SubClass;
    };
})();
//3. Object.create 활용
var extendClass3 = function(SuperClass, SubClass, subMethods){
    SubClass.prototype = Object.create(SuperClass.prototype);
    SubClass.prototype.consturctor = SubClass;
    if(subMethods){
        for(var method in subMethods){
            SubClass.prototype[method] = subMethods[method];
        }
    }
    Object.freeze(SubClass.prototype);
    return SubClass;
}

ES6를 활용한 클래스 문법 비교

var ES5 = function (name){
    this.name = name;
}
ES5.staticMethod = function(){
    return this.name + 'staticMethod';
};
ES5.prototype.method = function(){
    return this.name + 'method';
};
var es5Instance = new ES5('es5');
console.log(ES5.staticMethod());
console.log(es5Instance.method());

var ES6 = class{
    constructor(name){
        this.name = name;
    }
    static staticMethod(){
        return this.name + 'staticMethod';
    }
    method(){
        return this.name + ' method';
    }
};

var es6Instance = new ES6('es6');
console.log(ES6.staticMethod());
console.log(es6Instance.method());

ES6를 활용한 상속 방법

var Rectangle = class {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    getArea(){
        return this.width * this.height;
    }
};

var Square = class extends Rectangle{
    constructor(width){
        super(width, width);
    }
    getArea(){
        console.log('size is : ' + super.getArea());
    }
};

상속받는 SubClass로 만들기위해 class 명령어 뒤에 extends Rectangle 이라는 내용으로 상속이 끝난다.contructor 내부에서 super는 함수처럼 사용이 가능한데 이 함수는 SuperClass의 constructor를 실행한다.
contructor 메서드를 제외한 다른 메서드에서는 super를 객체처럼 사용할수있고, super는 SuperClass.prototype을 바라보게된다.