개발/Javascript

Class

치돈포에버 2022. 6. 6. 20:59

*복습 자료라서 뻔한 내용은 생략

 

 

Summary.

 

 

1. Class는 특별한 함수. 함수처럼 Declaration과 Expression이 있음

    + constructor 함수는 반드시 한 개만 존재

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle2"

 

2. 편의상 static initializer block 존재

    + https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_static_initialization_blocks

var y = 'Outer y';

class A {
  static field = 'Inner y';
  static {
    var y = this.field;
  }
  static {
  	console.log("initialization done");
  }
}

// var defined in static block is not hoisted
console.log(y);
// > 'Outer y'

 

3. static property, method는 Class에서 바로 사용 가능하고 instance에서는 접근불가

    ex) static property: caches, fixed-configuration, 등

    ex) static method: utility function, 등

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

 

4. this는 class 정의에서는 strict mode 자동 적용 때문에 auto binding이 안됨. 따라서 non strict mode 방식으로 정의할 때만 binding 됨 (물론 이 경우 default로 global에 binding 됨)

class Animal {
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // the Animal object
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined
function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object (in non–strict mode)

let eat = Animal.eat;
eat(); // global object (in non-strict mode)

 

5. field 사용하면 보다 documenting 함

    + private field는 무조건 field로 먼저 선언해둬야 함 (나중에 할당하면서 생성 불가)

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

 

6. extend & super 예시 (*prototype으로 추가해도 됨)

    + Object를 상속하고 싶으면 Object.setPrototypeOf() 사용

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

 

7. super는 constructor 말고 일반 method에서도 활용

class Cat {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(`${this.name} roars.`);
  }
}

let l = new Lion('Fuzzy');
l.speak();
// Fuzzy makes a noise.
// Fuzzy roars.

 

8. Abstract Base Class 혹은 Mix-in은 함수를 활용해서 구현 (Multiple Inheritance는 지원 안됨)

let calculatorMixin = Base => class extends Base {
  calc() { }
};

let randomizerMixin = Base => class extends Base {
  randomize() { }
};

class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

 

 

Additional.

1. Code Hoisting 적용 안됨

 

2. (다음에) Species 사용 사례? (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#species)

 

 

Reference.