【初心者】JavaScript クラスについて(E6から導入)【備忘録１２】

##11/06～11/07に勉強したこと
###オブジェクトに関数を用いる
-　以前学習したオブジェクトに関数を用いて、呼び出すことができる。
【例】

const animal={
 name="ココ",
 age=3,
 greet:()=>{
  console.log("こんにちは");
 }
}

console.log(animal.name);
animal.greet();

-　出力⇒　ココ　　こんにちは
-　上記のようなものを使ってユーザーデータを作成していくのだが、多数の場合
わざわざユーザーごとに書いていくのは、かなり手のかかることなので
下記の章で、【クラス】を使用した書き方を使って出力していく。

###クラス　（E6からの導入）⇒クラス名とインスタンス生成
-　クラス名は基本的に　class Animal{...　などと初めの一文字を大文字にする。
-　クラスを書き終えた{}の後でインスタンスを生成する。
-　定義したのち= new クラス名();で呼び出せる。()にはクラスの中で作る
　コンストラクタに引き渡す値を入力する。

【例】

class Animal{
}

const animal=new Animal();

###コンストラクタ／プロパティと値の追加
-　インスタンスを生成するときに、実行したい処理や設定を追加するためのもの。
-　基本クラスの{}の中で書く。
-　コンストラクタの中で、プロパティを書く際はthis.が直前に必要。

【例】

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

const animal = new Animal();
console.log(animal.name);

###インスタンスごとに値を変える場合
【例】

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

const animal= new Animal("ココ",3);
console.log(`ペットの名前は${animal.name}です`);

-　console.log(animal);にしてしまうと、出力が
Animal {name:‘ココ‘, age:3}になってしまうので注意！

###メソッド
名前・年齢はプロパティで追加したのに対して
メソッドは「挨拶をする」や「値を計算する」などの処理のまとまりを表す。

【例】

class Animal{
 constructor(name,age){
  this.name=name;
  this.age=age;
 }
//↓メソッド名
 greet(){
  console.log("こんにちは");
 }
//↓メソッド内でインスタンスの値を使用する場合
 info(){
  console.log(`私の名前は${this.name}です`);
 }
}

const animal=new Animal("ココ",3);
animal.greet();
animal.info();
//↑メソッドの呼び出し 

-　上記の場合は「こんにちは　　私の名前はココです」と出力される。

###継承
-　親クラスから子クラスに継承をすると、すべての機能が引き継がれる。
-　今まで使ってきたAnimalクラスからDogクラスに継承する際は下記のように書く。

class Dog extends Animal{.....}

【例】犬を人の年齢に！⇒戻り値を使う

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

 greet(){
   console.log("こんにちは");
 }

 info(){
   this.greet();
   console.log(`名前は${this.name}です`);
   console.log(`${this.age}歳です`);
 }
 
 class Dog extends Animal{
   getHumanAge(){
     return this.age * 7;
   }
 }
 
const dog = new Dog("ココ",3);
dog.info();

const humanAge=dog.getHumanAge();
//↑ここのdog.を忘れやすいので気を付ける！

console.log(`人間年齢で${humanAge}歳です`);

###オーバーライド
親クラスと子クラスで同名のメソッドを作った場合(info()...が両方にある場合)
子クラスのメソッドが優先される！(上書きされるため！)これをオーバーライドという。

例えば子クラスにプロパティを追加したい場合は・・・
【例】

....
class Dog extends Animal{
 constructor(name,age,breed){
  super(name,age); //親クラスでもともと書いていたコンストラクタ。
  this.breed = breed;
 }
}

##気を付けること
-　オブジェクトの復習になるが、各項目の間は「;」ではなく「,」！
-　インスタンス生成時にnewが抜けないように気を付ける！
-　メソッド内で、他のメソッドを呼び出す場合　this.メソッド名();
-　戻り値が関数の時から苦手なので、再度復習が必要。
-　戻り値の代入の際、();を忘れやすいので癖づけなければいけない。
-　super(name,age);の後、再度　this.breed=breed;と
　追加された分を書かなくてはいけないのを注意する。