Javascript Class 사용과 상속에 대해서 정리해 봅시다.
JavaScript에서 클래스는 유사한 특성과 동작을 공유하는 개체를 만들기 위한 청사진입니다. 고유한 속성과 메서드를 가질 수 있는 새로운 개체 유형을 정의하는 방법을 제공합니다.

클래스 선언 구문은 ES6에서 도입되어 개체 지향 프로그래밍 언어에서 오는 개발자에게 더 친숙한 구문을 허용합니다. . 클래스에는 인스턴스 메서드 및 정적 메서드뿐만 아니라 해당 속성의 기본값으로 객체를 초기화하는 데 사용되는 생성자가 있을 수 있습니다.

클래스는 상속을 사용하여 확장될 수 있으며, 여기서 하위 클래스는 속성을 상속할 수 있고 부모 클래스의 메소드. 이를 통해 코드 재사용이 가능하고 보다 체계적인 코드베이스를 만드는 데 도움이 됩니다.

Class Basic Syntax

클래스의 기본 생성 방법

class CarClass {
    constructor() { ... } //생성자
    method1() { ... } // 메소드
    method2() { ... } // 메소드
}

Sample Code

class Car {
    constructor(name, speed) { 
        this.name = name;
        this.speed = speed;
    }
    getName() {
        return this.name;
    } 

    getMaxSpeed() { 
        return this.speed;
    } 
}

// 클래스 생성 및 호출

let mycar = new Car('sonata', 120);
console.log(mycar.getName());
console.log(mycar.getMaxSpeed());

Class의 타입과 Instance의 타입 비교

위에서 생성한 Class와 Instance의 Type의 차이를 참고 하기 바랍니다.


console.log(typeof Car);  // 'function'  
console.log(typeof mycar);  // 'object'

console.log(Car == Car.prototype.constructor);  // true   

console.log(Object.getOwnPropertyNames(Car.prototype)); //전체 메소드 출력
>> (3) ['constructor', 'getName', 'getMaxSpeed']

Function 형태로 Class생성

Class는 다음과 같은 Function, prototype 형태로도 생성 할 수 있습니다.

function Car(name, speed) { 
    this.name = name;
    this.speed = speed;
}

Car.prototype.getName = function(){
    return this.name; 
}

Car.prototype.getMaxSpeed = function(){
    return this.speed; 
}

Class Field

클래스의 필드 변수를 선언할 수 있습니다.

class Car {
    engine = "gasoline";

    constructor(name, speed) { 
        this.name = name;
        this.speed = speed;
    }
    getName() {
        return this.name;
    } 

    getMaxSpeed() { 
        return this.speed;
    } 
    getEngineType(){
        return this.engine;
    }
}

let mycar = new Car('sonata', 120);
console.log(mycar.getEngineType());  // gasoline
console.log(mycar.engine);  // gasoline
console.log(Car.prototype.engine); // undefined

Getter and Setter

getter와 setter는 User.prototype에 정의됨.

class Car {
    engine = "gasoline";

    constructor(name, speed) { 
        this.name = name;        
        this.speed = speed; //speed 항목의 get/set을 적용
    }

    get speed(){
        return this._speed;
    }
    set speed(value){
        if(value < 0 ){
            this._speed = 0;
        }else{
            this._speed = value;
        }
    }
}

let mycar = new Car('sonata', -100);
console.log(mycar.speed); // 0 응답

Class 상속 (extends)

Javascript 클래스도 상속을 지원 합니다.

class Car {
    constructor(name, speed) { 
        this.name = name;
        this.speed = speed;
    }
    getName() {
        return this.name;
    } 

    getMaxSpeed() { 
        return this.speed;
    } 
}

class Truck extends Car {
    getLoad(){
        console.log('1톤 적재 가능');
    }
}

// 클래스 생성 및 호출

let mytruck = new Truck('bonggo', 100);
console.log(mytruck.getName());
console.log(mytruck.getMaxSpeed());
console.log(mytruck.getLoad());  // 1톤 적재 가능

메소드 오버라이딩

class Car {
    constructor(name, speed) { 
        this.name = name;
        this.speed = speed;
    }
    getName() {
        return this.name;
    } 

    getMaxSpeed() { 
        return this.speed;
    } 
}

class Truck extends Car {
    getName() {
        return "the new "+this.name;
    } 
}

let mytruck = new Truck('bonggo', 100);
console.log(mytruck.getName());         // the new bonggo
console.log(mytruck.getMaxSpeed());

super

상속 받은 하위 클래스에서 상위 부모의 메소드/생성자 접근시 super사용.

class Car {
    constructor(name, speed) { 
        this.name = name;
        this.speed = speed;
    }
    getName() {
        return this.name;
    } 

    getMaxSpeed() { 
        return this.speed;
    } 
}

class Truck extends Car {
    constructor(name, speed) { 
        super(name, speed);
        this.name = name;
        this.speed = speed;
    }

    getName() {
        return super.getName();
    } 
}

참고