TIL

JavaScript 5주차강의 (상속, get, set, static)

황민도 2024. 5. 10. 20:39

내일배움캠프 스파르타 코딩클럽

 

 

추가적인 것을 가져왔다.

< extends >  inheritance(상속) class

// 동물 전체에 대한 클래스
class Animal {
    // 생성자
    constructor(name) {
        this.name = name;
    }

    // 메서드(짖다)
    speak() {
        console.log(`${this.name} says!`)
    }
}

class Dog extends Animal { // extends 로 상속 받음
    //부모에게서 내려받은 메서드를 재정의할 수 있음
    // overriding...(내려받아 재정의하다.)
    speak() {
        console.log(`${this.name} barks!`);
    }
}

const cuttyPuppy01 = new Dog("복실이");
cuttyPuppy01.speak();

바로 상속 Class

class 는 정말 재미 있는듯..

 

이전 것을 응용

class Car {
    constructor(modelName, modelYear, type, price) {
        this.modelName = modelName;
        this.modelYear = modelYear;
        this.type = type;
        this.price = price;
    }

    makeNoise() {
        if (this.type === 'sports' && this.modelYear >= 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('빠바바아앙~');
        } else if (this.type === 'sports' && this.modelYear < 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('바바아앙~');
        } else if (this.type === 'sedan' && this.modelYear >= 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('빠아아앙~');
        } else if (this.type === 'sedan' && this.modelYear < 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('바아아앙~');
        }
    }    
}

const car1 = new Car('Ferrari', 2020, 'sports', '4억')
const car2 = new Car('Ferrari', 2010, 'sports', '1억')
const car3 = new Car('cadillac', 2020, 'sedan', '1억')
const car4 = new Car('cadillac', 2010, 'sedan', '6천만')

car1.makeNoise(); // Ferrari, 2020, sports, 4억 빠바바아앙~
car2.makeNoise(); // Ferrari, 2010, sports, 1억 바바아앙~
car3.makeNoise(); // cadillac, 2020, sedan, 1억 빠아아앙~
car4.makeNoise(); // cadillac, 2010, sedan, 6천만 바아아앙~

class SportsCar extends Car {
    constructor(modelName, modelYear, price) { // constructor 재 정의
        //Car(부모 class)에게도 알려주기!!
        super(modelName, modelYear, "sports", price);
    }
}

const sportsCar1 = new SportsCar("CT5-V", "2023", "1억")
sportsCar1.makeNoise(); // CT5-V, 2023, sports, 1억 빠바아아앙~

 

아래는 get과 set 경로를 추적하기 위해 여러가지 방법을 써 보았다.

< get, set method >

class Car {
    constructor(modelName, modelYear, type, price) {
        this.modelName = modelName;
        this.modelYear = modelYear;
        this.type = type;
        this.price = price;
    }

    makeNoise() {
        if (this.type === 'sports' && this.modelYear >= 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('빠바바아앙~');
        } else if (this.type === 'sports' && this.modelYear < 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('바바아앙~');
        } else if (this.type === 'sedan' && this.modelYear >= 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('빠아아앙~');
        } else if (this.type === 'sedan' && this.modelYear < 2014) {
            console.log(`${this.modelName}, ${this.modelYear}, ${this.type}, ${this.price}`);
            console.log('바아아앙~');
        }
    }    
}

const car1 = new Car('Ferrari', 2020, 'sports', '4억')
const car2 = new Car('Ferrari', 2010, 'sports', '1억')
const car3 = new Car('cadillac', 2020, 'sedan', '1억')
const car4 = new Car('cadillac', 2010, 'sedan', '6천만')

car1.makeNoise(); // Ferrari, 2020, sports, 4억 빠바바아앙~
car2.makeNoise(); // Ferrari, 2010, sports, 1억 바바아앙~
car3.makeNoise(); // cadillac, 2020, sedan, 1억 빠아아앙~
car4.makeNoise(); // cadillac, 2010, sedan, 6천만 바아아앙~

class SportsCar extends Car {
    constructor(modelName, modelYear, price, gasoline) {
        //Car(부모 class)에게도 알려주기!!
        super(modelName, modelYear, "sports", price);
        this._gasoline = gasoline+"L"
    }

    get gasoline() {
        return this._gasoline
    }
    set gasoline(value) {
        this._gasoline = value+"L"
    }
}

const sportsCar1 = new SportsCar("CT5-V", "2023", "1억", 60)
sportsCar1.makeNoise(); // CT5-V, 2023, sports, 1억 빠바아아앙~
console.log(sportsCar1._gasoline);  // 60L
console.log(sportsCar1.gasoline);   // 60L
sportsCar1.gasoline = 20
console.log(sportsCar1._gasoline);  // 20L
console.log(sportsCar1.gasoline);   // 20L

 

._gasoline 을 입력시 get, set 메서드를 거치지 않고 바로 필드 this._gasoline 값을 반환하며 

.gasoline 을 입력시 get 메서드가 호출되며 this._gasoline 필드값을 반환해주고

.gasoline = 20 을 입력시 set 메서드가 호출되며 값을 매개변수(value) 에 넣고 this._gasoline = value+"L" 로 하여
필드의 this._gasoline 값은 20L 가 된다.

그리하면 ._gasoline , .gasoline 은 호출시 반환 값 this._gasline (20L) 를 반환 하게 된다.

 

< static method >

class Calculator {
    static add (a, b) {
        console.log("[계산기] 더하기를 진행합니다.");
        return a + b;
    }

    static substract(a, b) {
        console.log("[계산기] 빼기를 진행합니다.");
        return a - b;
    }
}

console.log(Calculator.add(3, 5));          // 8
console.log(Calculator.substract(3, 5));    // -1

간단한 계산을 위해 인스턴스를 필요로 하지 않고 static 메서드를 활용하여 위와 같이 사용할 수 있다.