TIL09, JS: 클래스에 대해서*

sunghoonKim·2020년 11월 28일

붕어빵 틀을 이용하여 속에 들어가는 재료만 달리하면, 기본적인 모양은 동일하지만 그 맛은 각기 다 다른 붕어빵이 완성된다. 붕어빵 틀이 클래스이고, 만들어져 나온 붕어빵들을 인스턴스라 한다.

객체 생성 방법

자바스크립트에서 객체를 생성하는 방법은 3가지가 있다.

1. 객체 리터럴

var person = {};
person.lastName = 'kim';
person.firstName = 'sunghoon';

2. Object 생성자

빌트인 생성자Object 를 이용한다.

var person = new Object();
person.lastName = 'kim';
person.firstName = 'sunghoon';

사실 1번이나 2번이나 동일하다.

3. 생성자 함수

function Perosn(name, gender, lastName) {
  this.name = name;
  this.gender = gender;
  var lastName = lastName;
  this.married = true;
}

var person = new Person('sunghoon','male','kim');

this 는 객체 자신을 의미하는 대명사. this 로 묶인 변수들은 생성자 함수 외부에서 호출이 가능하지만 (public 하지만), 일반적으로 선언된 변수는 외부 호출이 불가하다.(private 하다.)

console.log(person.LastName); // Error!

클래스의 개념이 필요한 이유

객체 리터럴이나, Object 생성자를 이용하여 객체를 생성할 경우, 인스턴스를 생성하는 것이 수작업으로 일일이 이루어진다.

var person1 = {};
person1.name = 'tony';
person1.gender = 'male';

var person2 = {};
person2.name = 'jamie';
person2.gender = 'male';

var person3 = {};
person3.name = 'janice';
person3.gender = 'female';

위와 같이 동일한 작업이 너무 많이 반복되고, 만약 생성해야 할 객체의 숫자가 많다면 이는 매우 비효율적인 작업이 될것이다. 클래스의 개념을 이용하여, 미리 틀을 만들어 주면 반복적인 객체 생성 작업을 간소화 시킬 수 있다.

var person1 = new Person('tony', 'male');
var person2 = new Person('jamie', 'male');
var person3 = new Person('janice', 'female');

그외에도 여러 다른 클래스를 생성할 때 중복되는 부분들을 상속으로 처리하여 중복되는 부분을 생략할 수 있는 점도 있다.

클래스(ES6)

1. 클래스 생성

다음과 같은 형식으로 클래스를 선언한다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return 'prototype : ' + (this.first + this.second);
    }
}
 
var kim = new Person('kim', 10, 20);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 'prototype : 30'

클래스속의 내용 또한 변경 가능하다. 예로, sum 메소드를 변경하기 위해선,

// 코드는 위에서 이어진다.
kim.sum = function(){
    return 'this : ' + (this.first + this.second);
}

var lee = new Person('lee', 10, 10);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 'this : 30'
console.log("lee.sum()", lee.sum()); // 'lee.sum()' 'prototype : 20'

kim 의 sum 메소드는 this를 프린트 하도록 변경이 되었다. 각 인스턴스에 적용된 변경점은 다른 인스턴스에 영향을 끼치지 않는다. 따라서 다른 인스턴스인 lee 의 sum 메소드는 기존의 것과 동일하게 prototype을 프린트한다.

2. 클래스 상속

extends 를 사용하여 클래스를 상속한다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}
class PersonPlus extends Person{
    avg(){
        return (this.first+this.second)/2;
    }
}
 
var kim = new PersonPlus('kim', 10, 20);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 30
console.log("kim.avg()", kim.avg());

kim 은 PersonPlus 의 인스턴스이지만, PersonPlus 가 Person 를 상속하기 떄문에 sum 메소드를 사용하는데 아무런 문제가 없다.

3. super

서브 클래스에 새로운 내용을 추가한다면, 예로 생성자에 새로운 변수를 추가할때,

class PersonPlus extends Person {
  constructor (name, first, second, third) {
    this.name = name;
    this.first = first;
    this.second = second;
    this.third = third;
  }
}

위와 같이 다시 생성자를 작성해주어야 하는데, 상위 클래스와 중복되는 부분이지만 어쩔 수 없이 다시 작성을 해주어야 한다. 하지만, super 키워드를 이용하면 이를 보다 간단하게 작업 할 수 있다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum() {
        return this.first + this.second;
    }
}

class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum() {
        return super.sum() + this.third;
    }
    avg() {
        return (this.first + this.second + this.third) / 3;
    }
}
 
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum()); // 'kim.sum()' 60
console.log("kim.avg()", kim.avg()); // 'kim.avg()' 20