강의 들은 거 요약 - Classes

1. class

•  일종의 청사진(blueprint) 역할
• class를 통해 이용 가능
• constructor(생성자)를 통해 기본값 설정 가능
  
  • 생성자에 인자 설정도 가능

class User {
  constructor(age = 20) {
    this.username = "John";
    this.age = age;
  }
}

const firstUser = new User(15);
console.log(firstUser.username, firstUser.age);

const secondUser = new User();
console.log(secondUser.username, secondUser.age);

 

 

2. Extending Class

• 기존의 클래스에 새로운 것들을 덧붙이고 싶을 때 이용
• class 새로운클래스 extends 기존클래스

class User {
  constructor(age = 20) {
    this.username = "John";
    this.age = age;
  }

  introduce() {
    console.log(`My name is ${this.username} and I am ${this.age} years old.`);
  }
}

class Admin extends User {
  removeUser() {
    console.log("I can remove user.");
  }
}

const newAdmin = new Admin();

newAdmin.removeUser(); // I can remove user.
newAdmin.introduce(); // My name is John and I am 20 years old.

• 이 예시 코드에서 Admin이라는 클래스에는 introduce라는 메서드가 없지만, User라는 클래스에 introduce가 존재하기에 이용 가능

 

 

3. super

• Base Class의 constructor를 호출

class User {
  constructor({ username = "John", age = 20 }) {
    this.username = username;
    this.age = age;
  }

  introduce() {
    console.log(`My name is ${this.username} and I am ${this.age} years old.`);
  }
}

class Admin extends User {
  constructor({ username, age, isActive = true }) {
    super({ username, age });
    this.isActive = isActive;
  }
  removeUser() {
    console.log("I can remove user.");
  }
}

const newAdmin = new Admin({ username: "Alice", age: 15, isActive: true });

newAdmin.introduce(); // My name is Alice and I am 15 years old.
console.log(`isActive: ${newAdmin.isActive}`); // isActive: true