• extends
  • instanceof
  • overriding
  • 메서드 추가 / 재정의
  • overloading
  • getter / setter
  • class 예제

 

 

1) extends

 

// 상속
class Animal {
    constructor(name, color){
        this.name = name;
        this.color = color;
    }
    getInfo(){
        return `${this.name}는 ${this.color}입니다`
    }
}
// sub class
class Friend extends Animal{
    constructor(name, color){
        super(name, color);
    }
}
const dog = new Friend('강아지', '갈색');
const cat = new Friend('고양이', '흰색');
console.log(dog.getInfo());
console.log(cat.getInfo());



강아지는 갈색입니다
고양이는 흰색입니다

class를 상속할 때 사용한다.

Friend class를 사용했지만 Animal의 getInfo 함수가 실행되는 이유이다.

constructor과 super에 부모의 변수를 똑같이 넣어 준다.

 

 

2) instanceof

 

// 상속
class Animal {
    constructor(name, color){
        this.name = name;
        this.color = color;
    }
    getInfo(){
        return `${this.name}는 ${this.color}입니다`
    }
}
// sub class
class Friend extends Animal{
    constructor(name, color){
        super(name, color);
    }
}
const dog = new Friend('강아지', '갈색');
const cat = new Friend('고양이', '흰색');

console.log(dog instanceof Friend);
console.log(cat instanceof Friend);
console.log(dog instanceof Animal);
console.log(cat instanceof Animal);



true
true
true
true

생성자 이름을 확인할 때 사용한다.

dog와 cat 둘 다 Friend, Animal 생성자가 있으므로 true가 출력된다.

 

 

3) overriding

 

상위 클래스에 있는 메서드를 하위 클래스에 재정의 하는 방식이다.

class Father {
    constructor(){
        console.log('2. Father 생성자 함수 호출');
    }
    say(){
        console.log('Father say() 메서드 호출');
    }
}
class Son extends Father{
    constructor(){
        console.log('1. Son 생성자 함수 호출');
        super()
    }
    say(){
        console.log('Son 함수에서 say()함수 재정의');
    }
    test(){
        super.say();
    }
}
const son = new Son();
son.say();
son.test();



1. Son 생성자 함수 호출
2. Father 생성자 함수 호출
Son 함수에서 say()함수 재정의
Father say() 메서드 호출

Father의 say함수를 Son에서 재정의를 했기 때문에 위와 같은 결과가 나오게 된다.

 

 

4) 메서드 추가 / 재정의

 

class Ani {
    name
    age
    constructor(name) {
        this.name = name
        this.age = 3
    }
    run() {
        console.log(`${this.name} 달린다`);
    }
    eat() {
        console.log(`${this.name} 먹는다`);
    }
}
class Dog extends Ani {
    constructor(...arg) {
        super(...arg)
    }
    // 메서드 추가
    sleep() {
        console.log(`${this.name} 잔다`);
    }
}
class Cat extends Ani {
    swim() {
        console.log(`${this.name} 수영한다`);
    }
    // run 재정의
    run() {
        console.log(`${this.name} 고양이처럼 달린다`);
    }
}
const d = new Dog('멍멍이');
const c = new Cat('야옹이');
d.run();
d.eat();
d.sleep();
c.run();
c.eat();



멍멍이 달린다
멍멍이 먹는다
멍멍이 잔다
야옹이 고양이처럼 달린다
야옹이 먹는다

Dog class에는 sleep 함수를 추가해 주었고, Cat class에는 swim함수 추가와 run함수를 재정의 하였다.

 

 

5) overloading

 

class Person {
    constructor(name, kor, eng) {
        this.name = name
        this.kor = kor
        this.eng = eng
    }
    sum() {
        return (this.kor + this.eng)
    }
}
class Man extends Person{
    constructor(name, kor, eng, mat){
        super(name, kor, eng)
        this.mat = mat
    }
    sum(){
        return (this.kor+this.eng+this.mat)
    }
}
const person = new Person('윤파일', 60, 70)
console.log(`총점 : ${person.sum()}`);

const man = new Man('김편집', 80, 90, 70)
console.log(`총점 : ${man.sum()}`);



총점 : 130
총점 : 240
class Man extends Person{
    constructor(name, kor, eng, mat){
        super(name, kor, eng)
        this.mat = mat
    }
    sum(){
        return (super.sum()+this.mat)
    }
}

부모의 값을 그대로 사용하고 싶을 땐 오버로딩을 사용할 수 있다.

 

 

6) getter / setter

 

class Make {
    constructor(arr=[]) {
        this.arr = arr
    }
    get nums(){
        return this.arr.length ? 'Y' : null;
    }
    set nums(value){
        return [value, ...this.arr]
    }
}
const make = new Make([10, 20])
console.log(make.nums);

const make2 = new Make();
console.log(make2.nums);

make.nums = 500;
console.log(make.nums);
console.log(make.arr);



Y
null
Y
[ 10, 20 ]

nums이라는 가상 프로퍼티를 만들었다. 

nums는 읽고 쓸 순 있지만 존재하진 않는다. get으로 생성을 해 주고 출력을 위해 set을 사용한다.

티스토리툴바