[JS] 클래스와 인스턴스

 

클래스와 인스턴스

---

✏️ 클래스

클래스란?

클래스는 속성과 메소드를 정의하는 공간이다.
속성은 클래스에 포함되는 변수를 의미하고, 메소드는 클래스에 포함되는 함수를 의미한다.

 

클래스를 정의하는 데에는 2가지 방법이 있다.

• 함수로 정의 (ES5 문법)

function Introduce(name, age, favorite) {
    // 인스턴스 만들어질 때 실행되는 코드
}

• class 키워드로 정의 (ES6 문법)

class Introduce {
    constructor(name, age, favorite) {
        // 인스턴스가 만들어질 때 실행되는 코드
    }
}

여기서 constructor는 클래스가 인스턴스 객체를 생성할 때 객체를 초기화하는 메소드이다. 

 

constructor 메소드를 다음과 같이 사용한다면,

class Person {
    constructor() {
        this.name = 'subin';
    }
}

let sujin = new Person();

Person 클래스의 생성자 메소드의 this.name = 'subin'에 의해 sujin.name의 값은 'subin'으로 고정되는 것으로 초기화를 수행한다.

 

만약, constructor 메소드가 아래와 같이 사용되면

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

let sujin = new Person('sujin');

이번에는 첫 번째 예시와 다르게 construnctor 클래스 생성자에 name 속성을 부여했기 때문에, sujin.name은 인스턴스 객체를 생성하면서 설정한 속성값 'sujin'이 된다.

 

✏️ 인스턴스

인스턴스란?

인스턴스
는 클래스에서 정의된 정보들을 가져와 이용하는 객체이다.

 

인스턴스는 생성할 때 new 키워드를 이용한다.

let myself = new Introduce('subin', 28, 'apeach');

Introduce라는 클래스를 만들었다고 가정하고, myself라는 인스턴스 객체를 만들고자 한다면 Introduce 클래스 명 앞에 new라는 키워드를 붙여 let myself = new Introduce();의 형태로 인스턴스를 만들 수 있다.

속성자 메소드에 정의된 속성이 존재한다면 인스턴스를 생성할 때 속성 정보를 함께 입력한다.

 

✏️ 클래스의 ES5와 ES6 문법 차이

위에서 클래스를 정의하는데 2가지 방법이 있다고 하였는데, 클래스 내에 메소드를 작성할 때 더 차이를 두드러지게 보여준다.

 

• ES5 문법

function Introduce(name, age, favorite) {
    this.name = name;
    this.age = age;
    this.favorite = favorite;
}

Introduce.prototype.study = function() {
    // 공부하는 시간을 알려주는 코드
}

Introduce.prototype.game = function() {
    // 게임하는 시간을 알려주는 코드
}

Introduce.prototype.sleep = function() {
    // 잠자는 시간을 알려주는 코드
}

 

위의 코드에서 볼 수 있듯이 함수로 정의한 Introduce 클래스 내에서는 속성에 대한 초기화만 해주고, 그 외 메소드는 전부 함수 바깥에서 prototype 키워드를 사용해 정의해준다.

• ES6 문법

class Introduce {
    constructor(name, age, favorite) {
        this.name = name;
        this.age = age;
        this.favorite = favorite;
    }
    study() {
        // 공부하는 시간을 알려주는 코드
    }

    game() {
        // 게임하는 시간을 알려주는 코드
    }

    sleep() {
        // 잠자는 시간을 알려주는 코드
    }
}

반면에 ES6 문법에서는 Introduce 클래스 내에 constructor 메소드와 함께 묶어서 다른 메소드를 정의하는 모습을 볼 수 있다.