[자바스크립트 함수]클래스를 알아보자

클래스

CSS의 클래스랑 다른 개념이에요! 이 클래스를 잘 사용하면 유지보수가 굉장히 쉬워집니다. 사용이유는 아무래도 재사용성이 좋기 때문인데요. 같이 알아볼게요

---

■ 넌 뭐니?

함수의 집합체를 말합니다.

■ 기본문법

class study {   
    constructor(num, name, job){
        this.num = num;
        this.name = name;
        this.job = job;
    }

    result(){
        document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은" + this.job + "입니다.")
    }
}

const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study("2", "웹스토리보이", "프론트엔드 개발자");

info1.result();
info2.result();

결과보기

1. 내 이름은 웹쓰이며, 직업은웹퍼블리셔입니다.2. 내 이름은 웹스토리보이이며, 직업은프론트엔드 개발자입니다.

■ 상속

하나의 클래스를 정의하고 이 클래스에서 기능을 추가하려 할 때
또 다른 클래스를 만들고 기존 클래스를 상속시켜서 추가하려는 기능을 추가할 수 있습니다.

class study {   
    constructor(num, name, job){
        this.num = num;
        this.name = name;
        this.job = job;
    }

    result(){
        document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은" + this.job + "입니다.")
    }
}

// extends : 상속받겠다 
class study2 extends study {
    constructor(num, name, job, age){
        super(num, name, job);
        this.age = age;
    }
    result(){
        document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은" + this.job + "나이는 " + this.age +"입니다.")
    }
}



const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "웹스토리보이", "프론트엔드 개발자",100);

info1.result();
info2.result();
info1.result2();

결과보기

1. 내 이름은 웹쓰이며, 직업은웹퍼블리셔입니다.2. 내 이름은 웹스토리보이이며, 직업은프론트엔드 개발자나이는 100입니다.