[Javascript] 클래스 ✅

parkheeddong·2023년 1월 21일

JavaScript

목록 보기
11/26
post-thumbnail

1. 클래스

✨ 클래스는 객체지향 프로그래밍에서 특정 객체 (인스턴스)를 생성하기 위한 변수와 메소드를 정의하는 일종의 틀이다.

생성자 메서드 constructor는 new에 의해 자동으로 호출되어 객체를 생성한다.

  • new 클래스이름() 을 호출 시, 객체가 생성된다.

클래스 내 메소드를 정의할 수 있다.


class IdolModel{
    name;
    year;

    constructor(name, year) {
        this.name = name;
        this.year = year;
    }

    sayName() {
        return `안녕하세요 저는 ${this.name} 입니다`;
    }
}

const jenny = new IdolModel('제니', 1996);
const jisoo = new IdolModel('지수', 1995);
const rose = new IdolModel('로제', 1997);
const lisa = new IdolModel('리사', 1997);

console.log(jenny);  // IdolModel { name: '제니', year: 1996 }
console.log(jisoo);  // IdolModel { name: '지수', year: 1995 }
console.log(rose);   // IdolModel { name: '로제', year: 1997 }
console.log(lisa);   // IdolModel { name: '리사', year: 1997 }

console.log(jenny.sayName());
// 안녕하세요 저는 제니 입니다

console.log(typeof IdolModel); // function

console.log(typeof jenny);      // object


2. getter와 setter

getter : 값을 가져올 때 사용한다

1) 데이터를 가공해서 새로운 데이터를 반환할 때,
2) 프라이빗한 값을 반환할 때

setter : 값을 새로 저장할 때 사용한다

class IdolModel {
    name;
    year;
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }

    get nameAndYear() {
        return `${this.name} - ${this.year}`;
    }

    set setName(name) {
        this.name = name;
    }
}


const jenny = new IdolModel('제니', 1996);
const jisoo = new IdolModel('지수', 1995);
const rose = new IdolModel('로제', 1997);
const lisa = new IdolModel('리사', 1997);

console.log(jenny.nameAndYear);      // 제니 - 1996
// 함수가 아니므로 nameAndYear() 로 하면 안됨 !

jenny.setName = '김제니';
console.log(jenny);
// IdolModel { name: '김제니', year: 1996 }

✨ private 값에 대한 접근

class IdolModel2{
    #name;
    year;
    constructor(name, year) {
        this.#name = name;
        this.year = year;
    }

    get name() {
        return this.#name;
    }

    set name(name) {
        this.#name = name;
    }
}

const jenny2 = new IdolModel2('제니', 1996);
console.log(jenny2);
// IdolModel2 { year: 1996 } -> private 값 name은 출력 X

// private 값은 getter을 통해 접근한다.
console.log(jenny2.name); // 제니

jenny2.name = '김제니';

console.log(jenny2.name); // 김제니


3. 상속

상속은 객체들 간의 관계를 구축하는 방법이다.

extends 키워드 사용하여, 부모 클래스 등 기존의 클래스로부터 속성과 동작을 상속받을 수 있다.


class IdolModel {
    name;
    year;

    constructor(name, year) {
        this.name = name;
        this.year = year; 
    }
}

// FemalIdolModel은 IdolModel 클래스를 상속받는다.
class FemaleIdolModel extends IdolModel {
    dance() {
        return `여자 아이돌이 춤을 춥니다`;
    }
}

class MaleIdolModel extends IdolModel {
    sing() {
        return `남자 아이돌이 노래를 부릅니다`;
    }
}

✨ Super 키워드

부모 클래스에 접근할 때 super 키워드를 사용한다.
super()로, 부모 클래스에 존재하는 constructor을 사용할 수 있다.
super.로, 부모의 메소드에 접근할 수 있다.

const jenny = new FemaleIdolModel('제니', 1996);
console.log(jenny);
// FemaleIdolModel { name: '제니', year: 1996 }


const jimin = new MaleIdolModel('지민', 1995);
console.log(jimin);
// MaleIdolModel { name: '지민', year: 1995 }

console.log(jenny.dance());

console.log(jenny instanceof IdolModel); // true
// jenny는 IdolModel의 인스턴스이다. 

console.log(jenny instanceof FemaleIdolModel); // true

✨ 오버라이딩

class Idol {
    name;
    year;

    constructor(name, year) {
        this.name = name;
        this.year = year; 
    }

    sayHello() {
        return `안녕하세요 ${this.name} 입니다`;
    }
}

class FemaleIdol extends Idol {
    part;

    constructor(name, year, part) {
        super(name, year);  // 부모 클래스의 constructor
        // this.name = name, this.year = year을 의미한다.
        this.part = part;
    }


    sayHello() {
        // 부모 클래스의 함수 호출시 super 키워드 사용 가능
        return `${super.sayHello()} ${this.part}를 맡고 있습니다`;
    }
}


const rose = new Idol('로제', 1997, '보컬');
console.log(rose.sayHello());  // 안녕하세요 로제 입니다

const jenny = new FemaleIdol('제니', 1996, '래퍼');
console.log(jenny);

console.log(jenny.sayHello()); // 안녕하세요. 제니 입니다. 래퍼입니다

0개의 댓글