js Class

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

Classes - JavaScript | MDN

 

선언식 기본 예시

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

# 아래처럼 속성을 바로 할당한다면
# constructor를 축약해서 사용도 가능
# class Rectangle {
#    constructor(height, width) {
#        Object.assign(this, { height, width });
#    }
# }

const a = new Rectangle(100,100);

 

 

getter, setter 기본 예시

class Rectangle {
  constructor(height, width) {
    this.width = width;
    this.height = height;
    this.name = 'Rectangle'
  }

  get area() {
    return this.width * this.height;
  }

  set area(value) {
    this.width = Math.sqrt(value)
    this.height = Math.sqrt(value)
  }
}
let a = new Rectangle(100,100);

b.area // 10000
b.area = 100;
b.area // {width:10, height:10};

 

 

static 메소드 기본 예시

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  static name = 'rectangle';
  static getAge = () => 15;
  static rT = () => {return this;}
}

let a = new Rectangle(100,100);

a.name // undefined
Rectangle.name // 'rectangle'
Rectangle.rT // Rectangle 참조함

 

(인스턴스가 아닌 클래스 자체를 통해 정적 자원 참조 가능)

 

private 기본 예시

class Rectangle {
  #height = 0;
  #width = 0;
  // private를 위해 먼저 클래스내부에 선언
  constructor(height, width) {
    this.#height = height;
    this.#width = width;
  }
}

let a = new Rectangle(100, 100);
console.log(a["#width"]); // undefined

참고로 크롬 콘솔환경에선 접근가능

파일 만들어서 node로 실행해보기

 

클래스 상속 기본 예시

class Animal {
    constructor(name) {
      this.name = name;
    }
  
    speak() {
      console.log(`${this.name} makes a noise.`);
    }
  }
  
  class Dog extends Animal {
    constructor(name) {
      super(name); // super class 생성자를 호출하여 name 매개변수 전달
    }
  
    speak() {
      console.log(`${this.name} barks.`);
    }
  }
  
  let d = new Dog("Mitzie");
  d.speak(); // Mitzie barks.

 

 

작성중...