JavaScriptのclass

はじめに

初学者です。
基本は備忘録

classってなに？

よく例えられるのは設計図
class(設計図)からinstance(設計図をもとに作った物)を生成する

JavaScriptにおけるclass

JSにおけるclassはコンストラクター関数をclass表記で書けるようにしたもの
すでにある機能を簡単に書けるようにしたものをシンタックスシュガーという

---

class

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  hello() {
    console.log('hello ' + this.name);
  }
}

コンストラクター関数

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.hello = function() {
  console.log('hello ' + this.name);
}

classとコンストラクター関数は表記方法は違うが、やっていることは同じ
ES6からclass表記が主流なので基本的にはclassを使う

インスタンスの作り方

new演算子を使ってインスタンスを生成する

class Person {
  constructor(name, age) {
    this.name = name,
    this.age = age
  }
}

const tom = new Person('Tom', 18);

インスタンスってなにがいいの？

コードの量が少ない
メソットはprototypeの参照先をコピーして全てのインスタンスで使い回せるので余計なメモリを消費しない
メソット定義方法

class Person {
  constructor(name, age) {
    this.name = name,
    this.age = age
  }
  
  hello() {
    console.log('hello ' + this.name)
  }
}

コンストラクターと同じスコープに記述する

クラス継承

他のクラスのプロパティーとメソットを継承すること

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  hello() {
    console.log('hello ' + name)
  }
}

//extendsでPersonを継承できる(prototypeも含めて継承する)
class Japanese extends Person {
  constructor(name, age, gender) {
    //引数を固定thisはデフォルトでJApaneseのthisを固定
    super(name, age);
    this.gender = gender;
  }

  hello() {
    console.log('konnichiwa ' + this.name)
  }

  bye() {
    console.log('konnichiwa ' + this.name)
  }
}

const bob = new Japanese('Bob', 18, 'male')
console.log(bob)
//superはclass専用(superがないとエラー)
//superが実行されるとPersonのconstructor
//部分が実行される。その後Japanese専用のプロパティが実行
//prototypeの継承はextendsによって実現されている

super

継承元の関数を呼び出すためのキーワード
superは大抵の場合classのconstructor内で継承元のconstructorを呼び出す際に使われる
制約がある
1つ前のコードのclass Personがある程で書いてます

class Japanese extends Person {
  constructor(name, age, gender) {
  this.gender = gender;
  super(name, age);
  //superの前にthisを参照することはできない。この場合エラーになる
  }
  
  hello() {
    //継承元のメソットを呼び出すこともできる
    //メソットとして呼ぶ場合はthisを先に参照していても問題はない
    super.hello();
    console.log('ハロハロー')
  }
}

おわりに

JavaScriptにおけるclassが内部で何をしているのか知りたい場合はコンストラクター関数を学ぶとわかります。