javascirptのクラスについてのメモ

1. 後からフィールドを追加できる
   

class dog{
  constructor(name ){
    this.name = name;
  }
}
let yourDog = new dog('gol-chan');
console.log(yourDog);
yourDog.breed = 'golden retriever'; // 犬種の追加
console.log(yourDog);

実行結果

dog { name: 'gol-chan' }
dog { name: 'gol-chan', breed: 'golden retriever' }

Java とVBAを少し触った程度ですが、私が確かインスタンスにフィールド変数を追加するのはできなかったと思います。変な感じです。

1. クラスは関数
   

class dog{
  constructor(name, breed){
    this.name = name;
    this.breed = breed;
  }
  bow(){
    console.log('bow bow!');
  }
}
let yourDog = new dog('gol-chan', 'golden retriever');
console.log('type of dog : ' + typeof(dog));
console.log('type of yourDog : ' + typeof(yourDog));

実行結果

type of dog : function
type of yourDog : object

1. だいたい連想配列?(要検証)
   

class dog{
  constructor(name, breed){
    this.name = name;
    this.breed = breed;
  }
  bow(){
    console.log('bow bow!');
  }
}
let yourDog = new dog('gol-chan', 'golden retriever');
let myDog = { name  : 'lab-chan',
              breed : 'labrador retriever',
              bow   : function(){
                        console.log('bow bow!');
                      }
};
console.log(yourDog);
console.log(myDog);
console.log('type of yourDog : ' + typeof(yourDog));
console.log('type of myDog : ' + typeof(myDog));
yourDog.bow();
myDog.bow();

実行結果

★console.log(yourDog);の実行結果
dog { name: 'gol-chan', breed: 'golden retriever' }

★console.log(myDog);の実行結果
{ name: 'lab-chan',
  breed: 'labrador retriever',
  bow: [Function: bow] }
★ typeofの結果
type of yourDog : object
type of myDog : object
★ 実行方法は同じ
bow bow!
bow bow!

console.logを行うと、連想配列とだいたい同じですが、
・classのインスタンスはfunctionが表示されない
・classのインスタンスは{}の前にクラスの名前が表示される
のですね。

ES6のクラスは、実際のところ以前のclassの実装の別表記でしかないらしいので、今後しっかり理解する必要があると思いました。

以下を参考にさせていただこうと思っています。
・や…やっと理解できた！JavaScriptのプロトタイプチェーン