[ JS ] Classes

🔴  Introduction to Classes

 

class User {
  constructor(name) {
    this.username = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.username}`);
  }
}

const myUser = new User("Ryong");

myUser.sayHello();  // Hello, my name is Ryong

 

🟠  Extending Classes

 

class User {
  // this => User
  constructor(name, lastName, email, password) {
    this.username = name;
    this.lastName = lastName;
    this.email = email;
    this.password = password;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.username}`);
  }
  getProfile() {
    console.log(`${this.username} ${this.email} ${this.password}`);
  }
  updatePassword(newPassword, currentPassword) {
    if (currentPassword === this.password) {
      this.password = newPassword;
    } else {
      console.log("Can't change password.");
    }
  }
}

class Admin extends User {
  constructor(superAdmin) {
    this.superadmin = superAdmin;
    // 이럴 경우, 기존의 constructor를 잃어버리게 된다.
  }
  deleteWebsite() {
    console.log("Deleting the whole website...");
  }
}

const myAdmin = new Admin("Ryong", "Jeong", "ryong@com", "1234", true);

myAdmin.deleteWebsite();  // Deleting the whole website...

console.log(myAdmin);

 

🟡  super

 

class User {
  // this => User
  constructor({ username, lastName, email, password }) {
    this.username = name;
    this.lastName = lastName;
    this.email = email;
    this.password = password;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.username}`);
  }
  getProfile() {
    console.log(`${this.username} ${this.email} ${this.password}`);
  }
  updatePassword(newPassword, currentPassword) {
    if (currentPassword === this.password) {
      this.password = newPassword;
    } else {
      console.log("Can't change password.");
    }
  }
}

const myUser = new User({
  username: "Ryong",
  lastName: "Jeong",
  email: "ryong@com",
  password: "1234"
});

class Admin extends User {
  constructor({ username, lastName, email, password, superAdmin, isAdmin }) {
    super({ username, lastName, email, password });
    this.superAdmin = superAdmin;
    this.isActive = isActive;
  }
  deleteWebsite() {
    console.log("Deleting the whole website...");
  }
}

const myAdmin = new Admin({
  username: "Ryong",
  lastName: "Jeong",
  email: "ryong@com",
  password: "1234",
  superAdmin: true,
  isActive: true
});

 

class Counter {
  constructor({ initialNumber = 0, couterId, plusId, minusId }) {
    this.count = initialNumber;
    this.counter = document.getElementById(counterId);
    this.counter.innerText = initialNumber;
    this.plusBtn = document.getElementByID(plusId);
    this.minusBtn = document.getElementById(minusId);
    this.addEventListeners();
  }
  addEventListeners = () => {
    this.plusBtn.addEventListener("click", this.increase);
    this.minusBtn.addEventListener("click", this.decrease);
  };
  increase = () => {
    this.count = this.count + 1;
    this.repaintCount();
    // arrow function이 아닌 normal function에서 this를 사용할 경우,
    // eventListener 안에 있는 함수의 this이기 때문에
    // this는 plusBtn을 가리키게 된다.
    // class 내부의 모든 곳에서 this로 class를 가리키기 위해서는
    // arrow function을 사용하면 된다❗
  };
  decrease = () => {
    this.count = this.count - 1;
    this.repaintCount();
  };
  repaintCount = () => {
    this.counter.innerText = this.count;
  };
}

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