javascript - class

dynamic typing language

자바스크립트는 런타임에서 타입이 정해지기 때문에 타입에 유의해야한다.

class는 틀 object는 틀을 이용하여 찍어낸 데이터를 담는다(instance)

getter / setter

class User {
  constructor(name, age){
    this.name = name;
    this.age = age
  }
  get age(){
     return this._age
  }
  
  set age(value){
    this._age = value < 0 ? 0 : value;
  }
}
const user1 = new User("dongha", -1)
console.log(user1.age) // 0

class 사용자가 실수하는 것을 보완하기 위해 get()으로 값을 리턴하고 set()으로 값을 세팅한다. getter와 setter에서 변수 이름은 조금 다르게 한다.

static

class Article {
  static publicher = "dongha"
  
  constructor(articleNumber){
    this.articleNumber = articleNumber
  }

  static printPublisher(){
    console.log(Article.publicher)
  }
}

const article1 = new Article(1)
const article2 = new Article(2)

console.log(article1.publicher) // undefined
console.log(Article.publicher) // 1
Article.printPublicher() // dongha

static은 object 상관없이 class에 연결되어 있다. article1.publicher 를 해보면 undefined가 나온다. static은 object에 할당된 것이 아니라 class에 있기 때문이다. object 상관없이 공통적으로 사용하는 메서드는 static으로 하는 것이 좋다.

상속과 다양성

class Shape {
  constructor(width, height, color){
    this.width = width;
    this.height= height;
    this.color = color;
  }
  draw(){
    console.log(`drawing ${this.color} color of`)
  }

  getArea(){
    return this.width * this.height
  }
}
class Rectangle extends Shape {}
class Triangle extends Shape {}

const rectangle = new Rectangle(20,20,"blue")
rectangle.draw()  // drawing blue color of

const triangle = new Triangle(20,20,"red")

class Shape에 기본적인 데이터와 drwa(), getArea() 메서드가 있다. class Rectangle이 shape의 정보를 가져오려면 extends 를 하면 된다. 그리고 생성자 함수를 이용해 객체를 만들고 instance에 draw()메서드를 출력하면 지정된 값이 나온다.

class Triangle extends Shape {}

const triangle = new Triangle(20,20,"red")
console.log(triangle.getArea()) // 200

instance triangle의 area는 Shape의 getArea()로 구할 수 없다. 필요한 함수만 재정의한다는 것이

overriding

class Triangle extends Shape {
  getArea(){
    return (this.width * this.height) / 2;
  }
}

const triangle = new Triangle(20,20,"red")
console.log(triangle.getArea()) // 200

overriding하면 부모 함수가 호출되지 않는다. 그래서 super.부모의 함수로 호출하면 된다.

instanceOf

instance는 class에서 나온 건지 확인한다. true / false를 리턴함

출처 : https://www.youtube.com/watch?v=OCCpGh4ujb8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3