(loading)class

 

class

class는 객체를 만드는 공장이라고 할 수 있습니다.

ECMAScript 6부터 지원하기 시작했기 때문에 이전까지는

비슷한 작동을 하는 네가지 방식을 사용해야 했습니다.

 

Instantiation Patterns

Functional / Functional Shared / Prototypal / Pseudoclassical

이 중에서 Pseudoclassical 방식을 살펴 보겠습니다.

//menu라는 단일 프로퍼티를 생성하는 생성자 함수
function Order(menu) {
    this.menu = menu;
}

//prototype에 할당되는 message메서드
Order.prototype.message = function() {
    console.log(this.menu + "가 주문되었습니다");
}

//new 키워드를 통해 새로운 인스턴스 생성
let steven = new Order("커피");
steven.message();    // "커피가 주문되었습니다"

//prototype 상속을 통해 Order와 Object 인스턴스로 간주됩니다.
console.log(steven instanceof Order);	// true
console.log(steven instanceof Object);	// true

 

class 선언은 Pseudoclassical 방식과 유사하지만 내부에 직접 생성자를 정의할 수 있고, 메서드가 간결한 구문을 사용합니다.

class Order{
    //menu라는 단일 프로퍼티를 생성하는 생성자
    constructor(menu){
        this.menu = menu;
    }
    
    //prototype에 할당되는 message메서드
    message(){
    	console.log(this.menu + "가 주문되었습니다");
    }
}

let steven = new Order("커피");
steven.message();    // "커피가 주문되었습니다"

console.log(steven instanceof Order);	// true
console.log(steven instanceof Object);	// true

class Order{
    constructor(menu){
        //객체가 생성되는 과정에서 실행
    }
    
    
    message(){
    	//prototype에 할당되는 메서드로써 prototype과 function을 생략가능
        //message()  ===  Order.prototype.message = function() {}
    }
}

 

 

상속 (Inheritance)

먼저, class가 생기기전에 상속하는 방법을 보겠습니다.

function Order(menu, count){
    this.menu = menu;
    this.count = count;
}
Order.prototype.message = function(){
    return "주문되었습니다"
}

function OptionSize(menu, count, size){
    //class의 super와 같이 부모를 호출한다. 하지만 message 메서드를 사용할 수 없다.
    Order.call(this, menu, count);
    this.size = size;
}

//__proto__로 연결한다.
OptionSize.prototype.__proto__ = Order.prototype;

//새로운 객체를 만들어서 
OptionSize.prototype = Object.create(Order.prototype);
OptionSize.prototype.constructor = OptionSize;

class를 통해서 객체를 만들기 편해졌지만 만약에 어떠한 상황에서만 필요한 메서드를 만들고 싶다면 어떻게 하면 될까요?

보편적이지 않은 상황때문에 메서드를 만들어 놓는 일을 피하기 위해서 상속을 사용할 수 있습니다. 상속하는 방법말고도 코드를 수정하거나 새로운 class를 만들 수 있지만 코드가 반복되기 때문에 상속하는 방법으로 코드를 간결하게 만듭니다.

 

class Order{
    constructor(menu, count){
        this.menu = menu;
        this.count = count;
    }
    message(){
        return this.menu + this.count + "개가 주문되었습니다";
    }
}

class Option extends Order{
    size(){
    	return this.menu + "를 그란데 사이즈로 주세요";
    }
}

let steven = new Option('라떼', 2);
steven.size()	// "라떼를 그란데 사이즈로 주세요"


//super키워드
//만약에 부모 class에 없는 파라미터를 받아서 사용하고 싶다면 super 키워드를 사용
class OptionSize extends Order{
    constructor(menu, count, size){

        //super를 사용하면 부모 class의 생성자가 호출되고 프로퍼티가 생성 
        super(menu, count);
        this.size = size;
    }
    coffeeOrder(){
        return this.size + "사이즈의 " + super.message()
        //super.message() 부모 class의 메서드를 사용가능
    }
}

let steven = new OptionSize('라떼', 1, '벤티')
steven.coffeeOrder()	// "벤티사이즈의 라떼1개가 주문되었습니다"