[JavaScript] 클래스(Class) 이해하기

// 클래스 선언문
class Person {
  // constructor(생성자)
  constructor(name) {
    this._name = name
  }

  sayHi() {
    console.log(`Hi ${this._name}`)
  }
}

// 인스턴스 생성
const me = new Person('Lee')
me.sayHi() //Hi Lee

console.log(me instanceof Person) // true

const Foo = ''

{
  // 호이스팅이 발생하지 않는다면 ''가 출력되어야 한다.
  console.log(Foo)
  // ReferenceError: Cannot access 'Foo' before initialization
  class Foo {}
}

// 클래스명 MyClass는 함수 표현식과 동일하게 클래스 몸체 내부에서만 유효한 식별자이다.
const Foo = class MyClass {}

const foo = new Foo()
console.log(foo) // MyClass {}

new MyClass() // ReferenceError: MyClass is not defined

class Foo {}

const foo = new Foo()

class Person {
  // constructor(생성자). 이름을 바꿀 수 없다.
  constructor(name) {
    // _name의 클래스 필드이다.
    this._name = name
  }
}

// 인스턴스 생성
const me = new Person('Lee')
console.log(me)

class Foo {}

const foo = new Foo()
console.log(foo) // Foo {}

// 프로퍼티 동적 할당 및 초기화
foo.num = 1
console.log(foo) // Foo { num: 1 }

class Foo {
  constructor(name = '') {
    this.name = name // 클래스 필드의 선언과 초기화
  }
}
const foo = new Foo('Lee')
console.log(foo) // Foo { name: 'Lee' }

class Foo {
  constructor(arr = []) {
    this._arr = arr
  }

  // getter: get 키워드 뒤에 오는 메소드 이름 firstElem은 클래스 필드 이름처럼 사용된다.
  get firstElem() {
    // getter는 반드시 무언가를 반환해야 한다.
    return this._arr.length ? this._arr[0] : null
  }
}

const foo = new Foo([1, 2])
// 필드 firstElem에 접근하면 getter가 호출된다.
console.log(foo.firstElem) // 1

class Foo {
  constructor(arr = []) {
    this._arr = arr
  }

  // getter: get 키워드 뒤에 오는 메소드 이름 firstElem은 클래스 필드 이름처럼 사용된다.
  get firstElem() {
    // getter는 반드시 무언가를 반환하여야 한다.
    return this._arr.length ? this._arr[0] : null
  }

  // setter: set 키워드 뒤에 오는 메소드 이름 firstElem은 클래스 필드 이름처럼 사용된다.
  set firstElem(elem) {
    // ...this._arr은 this._arr를 개별 요소로 분리한다
    this._arr = [elem, ...this._arr]
  }
}

const foo = new Foo([1, 2])

// 클래스 필드 lastElem에 값을 할당하면 setter가 호출된다.
foo.firstElem = 100

console.log(foo.firstElem) // 100

class Foo {
  constructor(prop) {
    this.prop = prop
  }

  static staticMethod() {
    /*
    정적 메소드는 this를 사용할 수 없다.
    정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다.
    */
    return 'staticMethod'
  }

  prototypeMethod() {
    return this.prop
  }
}

// 정적 메소드는 클래스 이름으로 호출한다.
console.log(Foo.staticMethod())

const foo = new Foo(123)
// 정적 메소드는 인스턴스로 호출할 수 없다.
console.log(foo.staticMethod()) // Uncaught TypeError: foo.staticMethod is not a function

var Foo = (function() {
  // 생성자 함수
  function Foo(prop) {
    this.prop = prop
  }

  Foo.staticMethod = function() {
    return 'staticMethod'
  }

  Foo.prototype.prototypeMethod = function() {
    return this.prop
  }

  return Foo
})()

var foo = new Foo(123)
console.log(foo.prototypeMethod()) // 123
console.log(Foo.staticMethod()) // staticMethod
console.log(foo.staticMethod()) // Uncaught TypeError: foo.staticMethod is not a function

// 부모 클래스
class Circle {
  constructor(radius) {
    this.radius = radius // 반지름
  }

  // 원의 지름
  getDiameter() {
    return 2 * this.radius
  }

  // 원의 둘레
  getPerimeter() {
    return 2 * Math.PI * this.radius
  }

  // 원의 넓이
  getArea() {
    return Math.PI * Math.pow(this.radius, 2)
  }
}

// 자식 클래스
class Cylinder extends Circle {
  constructor(radius, height) {
    super(radius)
    this.height = height
  }

  // 원통의 넓이: 부모 클래스의 getArea 메소드를 오버라이딩하였다.
  getArea() {
    // (원통의 높이 * 원의 둘레) + (2 * 원의 넓이)
    return this.height * super.getPerimeter() + 2 * super.getArea()
  }

  // 원통의 부피
  getVolume() {
    return super.getArea() * this.height
  }
}

// 반지름이 2, 높이가 10인 원통
const cylinder = new Cylinder(2, 10)

// 원의 지름
console.log(cylinder.getDiameter()) // 4
// 원의 둘레
console.log(cylinder.getPerimeter()) // 12.566370614359172
// 원통의 넓이
console.log(cylinder.getArea()) // 150.79644737231007
// 원통의 부피
console.log(cylinder.getVolume()) // 125.66370614359172

// cylinder는 Cylinder 클래스의 인스턴스이다.
console.log(cylinder instanceof Cylinder) // true
// cylinder는 Circle 클래스의 인스턴스이다.
console.log(cylinder instanceof Circle) // true

// 부모 클래스
class Circle {
...
}

class Cylinder extends Circle {
  constructor(radius, height) {
    // ① super 메소드는 부모 클래스의 constructor를 호출하면서 인수를 전달한다.
    super(radius);
    this.height = height;
  }

  // 원통의 넓이: 부모 클래스의 getArea 메소드를 오버라이딩하였다.
  getArea() {
    // (원통의 높이 * 원의 둘레) + (2 * 원의 넓이)
    // ② super 키워드는 부모 클래스(Base Class)에 대한 참조
    return (this.height * super.getPerimeter()) + (2 * super.getArea());
  }

  // 원통의 부피
  getVolume() {
    // ② super 키워드는 부모 클래스(Base Class)에 대한 참조
    return super.getArea() * this.height;
  }
}

// 반지름이 2, 높이가 10인 원통
const cylinder = new Cylinder(2, 10);