class란

자바스크립트에서도 class 를 사용할 수 있다.
class 는 객체의 정의이다.

class User {
    constructor (name){
        this.userName = name;
    }

    sayHello(){
        console.log(`Hello ${this.userName}`);
    }
}

const user1 = new User("gildong");
const user2 = new User("younghee");

console.log(user1.userName);
user1.sayHello();
console.log(user2.userName);
user2.sayHello();

class 의 확장

extends 를 통해 class 를 상속받아 확장 할 수 있다.

class User {
    constructor (name, lastName, email, password){
        this.userName = name;
        this.lastName = lastName;
        this.email = email;
        this.password = password;
    }

    sayHello(){
        console.log(`Hello ${this.userName}`);
    }

    getProfile(){
        console.log(`${this.username} ${this.lastName} ${this.email} ${this.password} `);
    }

    updatePassword(newPassword, currentPassword){
        if(currentPassword === this.password){
            this.password = newPassword;
            console.log("update done.");
        }
        else{
            console.log("check password.");
        }
    }
}

const user1 = new User("gildong", "hong", "[email protected]", "1234");

//User class 를 상속 받아 Admin class 를 정의하였다.
class Admin extends User{
    deleteWebsite(){
        console.log("deleted");
    }
}

const admin = new Admin("admin", "king", "[email protected]", '1111');
admin.deleteWebsite();

super()란?

확장된 class 의 생성자 constructor() 내에서 부모 class 의 생성자를 호출하는 메소드이다.
부모 class 의 생성자를 호출하여 상속받은 속성도 초기화 할 수 있다.

class User {
    constructor (options){
        this.userName = options.name;
        this.lastName = options.lastName;
        this.email = options.email;
        this.password = options.password;
    }

    sayHello(){
        console.log(`Hello ${this.userName}`);
    }

    getProfile(){
        console.log(`${this.username} ${this.lastName} ${this.email} ${this.password} `);
    }

    updatePassword(newPassword, currentPassword){
        if(currentPassword === this.password){
            this.password = newPassword;
            console.log("update done.");
        }
        else{
            console.log("check password.");
        }
    }
}

class Admin extends User{
    constructor({userName, lastName, email, password, superAdmin, isActive}){
        super({userName, lastName, email, password});
       //super 를 호출하여 부모 class 의 생성자를 호출한다.
     	this.superAdmin = superAdmin;
        this.isActive = isActive;
    }
    
    deleteWebsite(){
        if(this.superAdmin && this.isActive){
            console.log("deleted");
        }
        else{
            console.log("no permission");
        }
    }
}

const admin = new Admin({
    userName : "gildong", 
    lastName : "hong", 
    email : "[email protected]", 
    password : "1234",
    superAdmin : true,
    isActive : false
});

admin.deleteWebsite();

class function 내에서의 this

class 내에서의 this 는 해당 class 를 나타낸다.
하지만 eventListener 에 지정된 function 에서의 this 는 해당 dom 객체가 된다.
this 키워드는 때에 따라 달라질수 있으므로 이를 방지하여야 한다.

class 내의 function 을 선언할 때는 arrow function 을 사용하도록 하자

class Counter{
    constructor({initialNumber = 0, counterId, plusId, minusId}){
        this.count = initialNumber;
        this.counter = document.getElementById(counterId);
        this.plusBtn = document.getElementById(plusId);
        this.minusBtn = document.getElementById(minusId);
        this.addEventListner();
        this.repaintCount();
    }

    addEventListner(){
        this.plusBtn.addEventListener("click", this.increase);
        this.minusBtn.addEventListener("click", this.decrease);
    }

    increase() {
        console.log(this);
      //여기의 this 는 + 버튼 을 나타낸다.
    }

    decrease = () => {
        console.log(this);
      //여기의 this 는 Counter 클래스를 나타낸다.
    }

    repaintCount(){
        this.counter.innerText = this.count;
    }
}

new Counter({
    initialNumber : 0,
    counterId : "count",
    plusId : "add",
    minusId : "minus"
});

=> 아래와 같이 arrow function 을 이용하면 된다.

addEventListner = () => {
        this.plusBtn.addEventListener("click", this.increase);
        this.minusBtn.addEventListener("click", this.decrease);
    }

    increase = () => {
        this.count = this.count + 1;
        this.repaintCount();
    }

    decrease = () => {
        this.count = this.count - 1;
        this.repaintCount();
    }

    repaintCount = () => {
        this.counter.innerText = this.count;
    }