TIL [Class]

クラスとインスタンスの作成

ES 6以前にJavaScriptでクラスを作成するのは直感的ではなく、面倒でした.しかし、ES 6はクラスを作成する簡単な新しい構文を導入した.

class Car{
  constructor(){
  }
}

上のコードは新しいクラスCarを作成します.製造例(特定自動車)はまだないが、いつでも製造できる.インスタンスを作成するときにnewキーワードを使用できます.newキーを使用してインスタンスを作成すると、classのthisがインスタンス(オブジェクト)になります.

let car1 = new Car();
let car2 = new Car();

car1 instanceof Car // true
car2 instanceof Array // false

Carクラスの例が2つあります.

class Car{
  constructor(make, model){
    this.make = make;
    this.model = model;
    this.userGears = ['P', 'N', 'R', 'D'];
    this.userGear = this.userGears[0];
  }
  shift(gear){
    if(this.userGears.indexOf(gear) < 0) throw new Error(`invalid gear: ${gear}`);
    this.userGear = gear;
  }
}

上記の例のこのキーワードは、呼び出しメソッドのインスタンスを指します.クラスを作成するときに使用するthisは、後で作成するインスタンスのプレースホルダロールと考えられます.メソッドを呼び出すと、thisが何であるかがわかります.上記のジェネレータを実行すると、インスタンスの作成時に自動車のメーカーとモデルを指定できます.また、userGearsはギアのリストであり、shiftという方法でuserGearを置き換えることができます.

let car1 = new Car('Tesla', 'Model S'); 

car1.shift('D'); // this.userGear를 'D'로 바꿈
                 // 메서드를 호출한 car1이 새로운 인스턴스

car1.userGear; // 'D'

クラス式

クラスを定義する別の方法は、クラス式です.関数の式のように、変数に割り当てられます.

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

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

const car1 = new Rectangle(3, 5);
car1.height // 3
car1.width // 5

const car2 = new Rectangle2(2, 2); // Error

クラス式によって変数に割り当てられたクラスは、自分の名前を書くことはできません.インスタンスを作成するときもnew+クラスを割り当てる変数名を使用します.

クラスは関数

ES 6にclassを導入する前に、クラスを作成することは、クラスジェネレータ用の関数を作成することを意味する.現在のclass構文はより直感的で簡単ですが、実際にはclassはショートカット構文にすぎず、javascriptのクラス自体は変わりません.クラスは実は関数にすぎません.次はES 5でCarクラスを作成したときです.

const Car = function(make, model){
  	    this.make = make;
            this.model = model;
            this.userGears = ['P', 'N', 'R', 'D'];
            this.userGear = this.userGears[0];
                          .
                          .
                          .
          }

静的メソッドとプロパティ

静的メソッドは、クラスインスタンス化なしで呼び出され、クラスインスタンスで呼び出されません.これは、クラスでstatic作成メソッドを使用すると、インスタンスがこのメソッドを使用できないことを意味します.

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);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755