[javascript] Class에 대하여 (with getter, setter)

class란?

class는 object를 생성하는 템플릿입니다. js에서는 prototype으로 object를 생성할 수 있으나, 다른 언어에서 사용하는 OOP개념들을 js에서도 좀 더 쉽게 사용할 수 있게 하기 위해서 class keyword를 사용하게 됩니다.

getter, setter

get과 set은 특별한 keyword입니다.
getter와 setter를 정의하기 위해서는 앞에 각각 get, set을 붙여주면 됩니다.
getter는 invoke하는것이 아니라 그냥 property값을 부르면 됩니다. (예시 참고)
setter또한 invoke가 아니라 값을 binding(또는 assign)시키는 것입니다. (예시 참고)

class Name {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    get fullName() {
        return `${this.first} ${this.last}`;
    }
    set firstName(first) {
        this.first = first;
    }
}

const me = new Name('stefan', 'cho')

// getter
console.log('My name is', me.fullName) // My name is stefan cho

// setter
me.firstName = 'stephen'
console.log('My name is', me.fullName) // My name is stephen cho

Inheritance

extends로 다른 class의 property를 가져다 쓸 수 있습니다.
상위 클래스를 superclass 하위클래스를 subclass라고 합니다.
superclass의 constructor에 값을 셋팅하기 위해서는 super라는 keyword를 사용합니다.

class Name {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    get fullName() {
        return `${this.first} ${this.last}`;
    }
    set firstName(first) {
        this.first = first;
    }
}

class Hero extends Name {
    constructor(heroName, first, last) {
        super(first, last);
        this.heroName = heroName;
    }

    get fullName() {
        return `[${this.heroName}] ${super.fullName}`
    }
}

// Inheritance
const IamHero = new Hero('DEV', 'stefan', 'cho');
console.log('My name is', IamHero.fullName) // My name is [DEV] stefan cho

instanceof

어떤 class에서 부터 derived(내려왔는지)인지를 알기 위해서 instaceof를 사용합니다.

class Name {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    get fullName() {
        return `${this.first} ${this.last}`;
    }
    set firstName(first) {
        this.first = first;
    }
}

class Hero extends Name {
    constructor(heroName, first, last) {
        super(first, last);
        this.heroName = heroName;
    }

    get fullName() {
        return `[${this.heroName}] ${super.fullName}`
    }
}

// instanceof
console.log(new Hero() instanceof Name); // true