[카카오테크캠퍼스 6주차] JavaScript 마스터: 클래스

⏳ 2023. 5. 15. - 2023. 5. 21.

 

Prototype

js는 프로토타입 기반 언어이다.

js에서, 원시형 타입을 제외한 모든 것은 객체이고, 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다.

그리고 이것은 객체 지향 언어의 상속처럼, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다.

이러한 부모 객체를 프로토타입이라고 한다.

// Prototype

function User(first, last) {
  this.firstName = first;
  this.lastName = last;
}

const user1 = new User("user", "1");
const user2 = new User("user", "2");

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

User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};

console.log(user1.getFullName());
console.log(user2.getFullName());

---

클래스

ES6부터 클래스를 사용할 수 있다.

프로토타입과 기능적으로 같지만, 다른 프로그래밍 언어처럼 사용하기 위해 클래스가 생겼다.

// ES6 Classes

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const user1 = new User("user", "1");
const user2 = new User("user", "2");

console.log(user1.getFullName());
console.log(user2.getFullName());

Getter, Setter

// Getter, Setter

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  set fullName(value) {
    [this.firstName, this.lastName] = value.split(" ");
  }
}

const user1 = new User("user", "1");
const user2 = new User("user", "2");

user2.fullName = "new user";

console.log(user1.fullName);
console.log(user2.fullName);

정적 메소드

프로토타입에서 사용하는 메소드 : 클래스로 인해 생긴 인스턴스가 사용

정적 메소드 : 클래스 자체가 사용

// 정적 메소드(Static Method)

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  static isUser(user) {
    if (user.firstName && user.lastName) {
      return true;
    }
    return false;
  }
}

const user1 = new User("user", "1");

console.log(user1.getFullName()); // "user 1"
// console.log(User.getFullName()); // ❌ error

// console.log(user1.isUser()); // ❌ error
console.log(User.isUser(user1)); // true

상속

// 상속(Inheritance)

class Vehicle {
  constructor(accerlation = 1) {
    this.speed = 0;
    this.accerlation = accerlation;
  }
  accerlate() {
    this.speed += this.accerlation;
  }
  deccerlate() {
    if (this.speed <= 0) {
      console.log("정지");
      return;
    }
    this.speed -= this.accerlation;
  }
}

class Bicycle extends Vehicle {
  constructor(price = 100, accerlation) {
    super(accerlation);
    this.price = price;
    this.wheel = 2;
  }
}

class Car extends Bicycle {
  constructor(license, price, accerlation) {
    super(price, accerlation);
    this.license = license;
    this.wheel = 4;
  }
  // 오버라이딩(Overriding)
  accerlate() {
    if (!this.license) {
      console.error("무면허");
      return;
    }
    this.speed += this.accerlation;
    console.log("가속", this.speed);
  }
}

class Boat extends Vehicle {
  constructor(price, accerlation) {
    super(accerlation);
    this.price = price;
    this.motor = 1;
  }
}

extends를 통해 클래스를 상속할 수 있다.

자식 클래스의 생성자가 없는 경우, 기본적으로 부모 클래스의 생성자를 호출한다.

자식 클래스의 생성자를 만들고 싶다면 super()를 호출해야 한다.

instanceof

class A {
  constructor() {}
}
class B extends A {
  constructor() {
    super();
  }
}
class C extends B {
  constructor() {
    super();
  }
}
const a = new A();
const b = new B();
const c = new C();

console.log(c instanceof A); // true
console.log(c instanceof B); // true
console.log(c instanceof C); // true

console.log(c.constructor === A); // false
console.log(c.constructor === B); // false
console.log(c.constructor === C); // true

instanceof : 클래스 간 부모 자식 관계를 알 수 있다.

constructor : 인스턴스가 어떤 클래스에 의해 생성되었는지 알 수 있다.