JavaScript - Class, this

<목차>

1. class

    1 - 1. this

    1 - 2. class 선언 및 호출

    1 - 3. 부모, 자식 클래스(상속)

    1 - 4. getter setter

 

---

1. class

클래스는 객체를 만들기 위해 사용되는 방법 중 하나이다. 

클래스는 데이터와 이를 조작하는 코드를 하나로 추상화해, 클래스 사용 시 코드의 가독성이 좋아지고, 상속을 통한 코드의 재사용성이 좋아진다.

---

1 - 1. this

this는 객체를 참조하기 위해서 사용된다.

this를 사용하는 방법과 이유는 다양하지만 클래스 내에서 사용하게 되는 이유만 간략히 설명하자면, new 예약어(동적할당) 사용 시 빈 객체를 생성한 뒤 클래스 생성자 함수를 호출했을 때 this로 빈 객체를 참조하기 위해서 class선언 시에 생성자 함수에 this를 사용해야 한다.

 

---

1 - 2. class 선언 및 호출

 

class 선언

class 선언 시 관례적으로 class이름의 첫 글자는 대문자로 작성한다.

class Test{
    // constructor : 생성자 함수
    // 최초에 한번 new로 객체를 생성할 때
    constructor(_age, _phone, _city) {
        this.age = _age;
        this.phone = _phone;
        this.city = _city;
    }
}

 

constructor

생성자 함수, new로 객체를 생성할 때 최초에 한번 실행되는 함수이다.

class 생성 시 constructor를 사용하지 않으면 정적인 데이터만 생성할 수 있기 때문에 생성 시 동적으로 데이터를 입력하기 위해서 사용한다.

 

class 호출

let test = new Test(10, "010-0000-0000", "서울");

 

 

---

1 - 3. 부모, 자식 클래스(상속)

// 부모 클래스
class Mother {
    constructor(_name, _age) {
        this.name = _name;
        this.age = _age;
    }
}

// 자식 클래스 Child class
// 상속 예약어 extends
class Child extends Mother {
    constructor(_hp, _mp, _atk, _name, _age, Mother) {
        // super === 부모 클래스의 생성자 함수를 호출
        super(_name, _age);
        this.hp = _hp;
        this.mp = _mp;
        this.atk = _atk;
    }
}

 

부모 클래스

부모 클래스는 자식 클래스들에서 공통적으로 사용되는 내용들을 추상화해 작성하며, 자식 클래스에 상속시켜 코드의 재사용성이 좋아지게 된다.

 

자식 클래스

자식 클래스는 공통적으로 사용되는 내용을 추상화시켜 놓은 부모 클래스를 상속받아 사용된다. 부모클래스를 상속받기 위해서는 extends 예약어가 필요하다.

 

extends

상속 예약어로 상속받을 클래스의 이름 뒤에 extends 예약어를 사용하고 그 뒤에 상속될 부모 클래스의 이름을 작성한다.

class Child extends Mother {}

 

super

자식 클래스에서 상속받은 부모클래스를 사용학 우해 사용되는 예약어이다.

extends로 상속을 한 뒤, super()로 부모클래스를 불러오지 않으면 에러가 발생하게 된다.

상속 클래스는 반드시 생성자 함수 내에서 super()를 호출해야 한다.

class Mother {
	constructor(mother) {
        this.mother = mother;
    }
}

// 상속받은 부모클래스를 super()로 호출 X
// 에러 발생
// extends로 상속받은 클래스는 반드시 생성자 함수 내에서 super()를 호출해야 한다.
class Child extends Mother {
	constructor() {
    }
}

// 상속받은 부모클래스를 super()로 호출
class Child extends Mother {
	constructor(mother) {
    	super(mother);
    }
}

// 자식클래스 생성 후 콘솔창에 "부모 클래스" 출력
let child = new Child("부모 클래스");
console.log(child.mother);

 

 

---

1 - 4. getter setter

Getter와 Setter는 객체 지향 프로그래밍에서 사용되는 개념이다. 즉, 단어 그대로 Getter는 객체의 속성(property) 값을 반환하는 메서드이며, Setter는 객체의 속성 값을 설정, 변경하는 메서드로 사용한다.

일반적으로 getter는 메서드 이름 앞에 get을 붙여서 이름을 만들고, setter는 메서드 이름 앞에 set을 붙여 이름을 만든다.

 

객체의 데이터 접근 시 일반적으로 프로퍼티로 바로 접근해서 이름값을 가져오거나 재설정하는데, 바로 접근하지 말고, get(), set() 메서드를 통해 설정하도록 하는 기법이 getter와 setter 개념이라고 보면 된다.

 

사용예시

class Mother {
    constructor(_name, _age) {
        this.name = _name;
        this.age = _age;
    }
}

class Child extends Mother {
    constructor(_hp, _mp, _atk, _name, _age, Mother) {
        // super === 부모 클래스의 생성자 함수를 호출
        super(_name, _age);
        this.hp = _hp;
        this.mp = _mp;
        this.atk = _atk;
    }
    
    // getter
    getState() {
        return `hp : ${this.hp} / mp : ${this.mp} / atk : ${this.atk}`;
    }
	
    //setter
    setHp(_hp) {
        this.hp = _hp;
    }
}

let character = new Child(100, 100, 200, "이름", 20);
// setter를 사용해 _hp 변경
character.setHp(50);

// getter 사용해 콘솔창에 출력
console.log(character.getState());