/ JAVASCRIPT

JS class 만들기

JavaScript 관련 글입니다.




이번 글에서는 class 키워드를 사용하여 클래스를 만드는 방법에 대해서 알아보겠습니다.

Class


class Animal {
    constructor(type) {
        this.type = type;
    }
}

const dog1 = new Animal('dog');
console.log(dog1);

위의 예시는 간단하게 동물 클래스를 만든 것입니다. ‘class’를 붙여서 정의하는데, constructor를 사용하면 생성되는 Object의 기본값들을 초기화할 수 있습니다. Animal을 이용하여 dog1 오브젝트를 생성하였습니다.



또한 클래스안에 함수 역시 추가할 수 있습니다.

// 1번 
class Person {
    constructor(name) {
        this.name = name;
        this.sayHi = function() {
            console.log('Hi');
        }
    }
    
}
const person = new Person('Kim');

// 2번
class Person {
    constructor(name) {
        this.name = name;
    }

    sayHi() {
        console.log('Hi');
    }
}

const person = new Person('Kim');

1번의 경우에는 constructor 내부에 함수를 추가했습니다. 이 경우는 함수를 직접적으로 자식이 값을 물려받습니다.
2번의 경우에는 constructor 밖에 함수를 추가했습니다. 이 경우는 함수가 Person의 prototype에 추가됩니다. (자식의 부모의 prototype에 추가)

상속


하나의 클래스를 상속하여 다른 클래스를 만들 수 있습니다. 바로 ‘extends’ 키워드를 사용하면 됩니다.

class Animal {
    constructor(type) {
        this.type = type;
    }
}

class Pets extends Animal {
    constructor(type, age) {
        super(type); // Animal의 constructor안의 값들을 그대로 가져온다고 보면된다.
        this.age = age;
    }
}

const choco = new Pets('dog', 2);
console.log(choco);

Animal 클래스를 상속하여 Pets 라는 클래스를 만들고 choco라는 오브젝트를 만든 것입니다. 위처럼 ‘extends’ 다음에 상속하고 싶은 대상을 쓰면 됩니다.
그리고 Pets의 constructor안에 super()를 써줘야 Animal의 constructor안의 값들을 그대로 가져옵니다.
super안의 파라미터는 부모의 constructor에 들어가는 파라미터랑 동일한 값이 들어갑니다.




End.