ES6（クラス）

はじめに

　ES6のクラスが導入されるまではコンストラクター関数によってプロパティを設定し、prototypeによって関数を作った後newインスタンスによってオブジェクトを生成していた。それをより直感的にしたのがクラスです。

//コンストラクター関数
function Person(name,age) {
 this.name = name;
 this.age = age;
}
Person.prototype.hello = function(){
 console.log('hello' + this.name);
}
const bob = new Person('Bob',22) //生成されるのインスタンスはオブジェクト

//class
class Person {
 constructor(name,age){
  this.name = name;
  this.age = age;
}
 hello(){
   console.log('hello' + this.name);
}
}
const bob = new Person('Bob',22) //生成されるインスタンスはオブジェクト

上記のコードのようにclass表記の方がclass内でメソッドをいくつも作れたり、コンストラクターにプロパティを設定できたりするため直感的でわかりやすいです。

getter/setter

getter/setterは、クラス利用者に対してはプロパティ(属性)のように簡単に代入や参照ができ、かつ、クラス開発者にとっては、代入・参照の際にメソッドがコールされ、代入・参照時にログを記録したり複雑な内部処理を実行することが可能となります。

//class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  hello() {
    console.log("hello" + this.name);
  }
  get bey() {
    console.log("get:"+"bey");
    return this._bey;
  }
  set bey(val) {
    console.log("set:" + val + " bey");
    this._bey = val;
  }
}
const bob = new Person("Bob", 22); //生成されるインスタンスはオブジェクト
bob.bey = "bobsan";  //set:bobsan bey(setterメッソドが呼ばれる。)

console.log(bob.bey);//get:bey bobsan(getterメソッドが呼ばれる。)

get/setは、あくまで値を取得/設定するための特殊なメソッドです。実際に値を保持するのは、この例であればthis._beyです。get/setブロックでも、このthis._beyから値を取得/設定している点に注意してください。プロパティへの設定値は、setブロックの引数(ここではval)に暗黙的に渡されます。
また、このように定義されたgetter/setterも、利用者側からは、(メッソドではなく)あくまで変数(プロパティ)として見えている点に注意です。今回の例では、bob.bey('bobsan')ではなく、bob.bey = "bobsan"でアクセスできます。getter/setterを利用することで、「見た目は変数、中身はメソッド」のプロパティを定義できるというわけです。

クラス継承

　複数のクラスに共通するプロパティやメソッドがあるのに分離してコードを書くのは冗長です。そこでクラスには他のクラスのプロパティとメソッドを継承するクラス継承という機能があります。以下で確認しましょう。

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

class Japanese extends Person { //継承の際、継承先　extends　継承元とする必要があります。
 constructor(name,age,gender) {
  super(name,age);　//superメソッドで継承元のプロパティを継承先でも使える状態にします。
  this.gender = gender; 　//継承元のプロパティを受け継いだあとにJapanese独自のプロパティを設定。
}
 hello() {
  console.log('konnichiwa' + this.name)//←継承元のメソッドを上書きすることができます。
}
}
const takashi = new Japanese('Takashi',24,'Male') //生成されるインスタンスはオブジェクトです（しつこいようですが…）