---

220518

---

JavaScript Class

---

Class

클래스란 객체를 생산하는 생산 도면 혹은 청사진이란 표현을 자주 사용한다.
기능부터 구현하는 게 아니라, 역으로 컨셉 단위로 머리속에 큰 그림을 그리고 그걸 역으로 쪼개서 구현하는게 추상화 -> 구현이다.

class 클래스이름 {

}

• class를 기반으로 만든객체는 인스턴스라고 부른다.
  (그냥, 객체라고 부르는 경우도 많다.)

// 인스턴스 생성할 때
new 클래스이름()

// function Robot(name) {
//     this.name = name;
// }

// Robot.prototype.sayYourName = function () {
//     console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
// }


class Robot {
    // 클래스의 생성자 함수입니다. 하나의 클래스는 하나의 생성자만 정의할 수 있습니다. 
		// 그리고 생성자 함수는 new 키워드가 호출될때 자동으로 실행됩니다.
    constructor(name) {
        this.name = name;
    }

    // 메소드를 정의합니다. 메소드는 클래스가 생성한 인스턴스를 통해 사용할 수 있습니다.
    sayYourName() {
        console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
    }
}

class 상속

 extends 키워드를 사용해서 상속한다.
부모 클래스의 프로퍼티를 상속받기 위해 super 함수를 사용한다. 이때 super는 부모 생성자를 참조한다.
 

• super 사용시 주의할 점 만약 파생 클래스에 생성자 함수를 사용하고 싶다면 반드시 super 함수를 사용해야한다.
  파생클래스에 생성자 함수가 없다면 super 함수가 자동으로 호출되어 부모 클래스의 프로퍼티를 상속 받게 한다.
  생성자 함수에서 this 값을 사용할 경우 super 함수는 반드시 this 보다 먼저 실행되어야 한다.
  파생 클래스가 아닌 클래스에서 사용하려고 해도 에러가 발생한다.

class BabyRobot extends Robot {
    constructor(name) {
        super(name);
        this.ownName = '아이쿵';
    }

    sayBabyName() {
				// 또한 상속을 받게되면 부모 클래스의 메소드를 사용할 수 있게 됩니다. 때문에 this로 접근 할 수 있습니다.
        this.sayYourName();
        console.log('Suceeding you, Father!');
    }
}

• 소시지를 만드는 클래스를 정의해자.

1. 생성자 함수는 두 가지 매개변수를 전달 받을 수 있으며 전달되는 매개변수에 따라 소시지의 맛이 결정됩니다.
2. 소시지 객체는 taste 라는 메서드가 존재합니다. 생성자함수에서 전달받은 재료에 따라 맛을 나타내는 콘솔로그를 출력하는 역할을 합니다. (예시 : ‘소고기’ 와 ‘파’ 를 매개변수로 전달하였을 경우, ‘소고기와 파 맛이 난다!’ 는 콘솔 메세지를 출력합니다.)
3. 소시지 클래스를 상속받는 FiresSausage 파생클래스를 생성해봅니다. 파생클래스의 taste 메서드를 실행하면 콘솔 메세지에 불맛이 나기 시작합니다.

Sausage {
	constructor(el1, el2) {
		this.inside1 = el1;
        this.inside2 = el2;
    }

	taste() {
		console.log(`${this.inside1}와 ${this.inside2}의 맛이 난다!!`);
    }
}
const sausage = new Sausage('소고기', '돼지고기');

class FireSausage extends Sausage {
	constructor(el1, el2, el3) {
		super(el1, el2);
		this.inside3 = el3;
    }
    
    taste() {
		console.log(`${this.inside1}와 ${this.inside2}의 맛이난다!! 불맛도 난다!!`);
    	}
    
    
}
const fireSausage = new FireSausage('소고기', 돼지고기)

비공개 프로퍼티

객체 안의 중요한 정보를 안전하게 보호하여 프로그램이 뜻하지 않게 변경되는 것을 막는 역할을 한다.
# 키워드를 이용하면 프로퍼티를 비공개로 전환할 수 있다.
이제 #password 의 값에 접근하고 수정하려면 값을 불러오는 메서드를 getter, 값을 수정하는 메서드를 setter가 있다.

class Robot {
    #password

    constructor(name, pw) {
        this.name = name;
        this.#password = pw;
    }


    sayYourName() {
        console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
    }

    get password() {
        return this.#password
    }

    set password(pw) {
        this.#password = pw;
    }
}

const bot = new Robot('홍렬', 1234);

get 과 set을 사용할 때 주의할 점!

	get과 set을 사용하면 마지 객체의 프로퍼티를 수정하는것 같은 간편함을 느낄 수 있다. 
	하지만 해당 코드를 직접 작성하지 않은 협업자들에게는 오해를 일으킬 소지가 있다. 
	get, set 안에 어떤 로직이 들어있는지 파악하지 못하고 단순히 객체의 프로퍼티를 수정한다는 착각을 일으킬 수 있다.
	협업 시에는 주석이나, 가이드 문서를 만들어 충분한 정보를 제공해주는것이 좋다.

//자신의 class에 비공개 프로퍼티를 추가해보기


class Robot {
            #password

            constructor(name, pw) {
                this.name = name;
                this.#password = pw;
            }


            sayYourName() {
                console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
            }		


get password() {
                return this.#password
            }

            set password(pw) {
                this.#password = pw;
            }
        }

        const bot = new Robot('홍렬', 'q1w2e3');