JS学習記録第12回　Classとインスタンス

こんばんは。今回はJSのClassとインスタンスについてまとめてみようと思います。
これがわかればJSの使える範囲が大きく増えると感じました！

Classとインスタンス

ではまず、classとインスタンスについてまとめてみます！
classとは・・・
html、cssをしている人は分かるかもしれませんが、
ある一つの型（設計書）をまとめたみたいなもののことを言います。
いわゆるテンプレートということですね！

そしてインスタンスは、
Classを用いて作成されたもののことを言います。

マークアップの際にもよく、classの使い回しをすることが多いと思います。
それがJSでも同じようなことができるということです！

簡単にいうと、
JSで似たような記述があった場合を細かく１つにまとめることができるということです！

例を挙げてみます。
例えば以下のように、setTimeoutである特定のClassに時間差でactiveというclassを付与するという記述があるとします。
下記は、
mvCatchというクラスに0.2秒後activeを付与。
mvCatch02というクラスに0.4秒後activeを付与。
mvCatch_subというクラスに0.6秒後activeを付与という意味。

$(document).ready(function () {
   setTimeout(function () {
       $(".mvCatch").addClass("active")
   }, 200);
   return false;
});
$(document).ready(function () {
   setTimeout(function () {
       $(".mvCatch02").addClass("active")
   }, 400);
   return false;
});
$(document).ready(function () {
   setTimeout(function () {
       $(".mvCatch_sub").addClass("active")
   }, 600);
   return false;
});

これだけでもいいのですが、同じような記述があるので、これをまとめることができます！

クラスの記述の仕方は以下の通りです。

class 任意のclass名　{

   constructor(引数を取る){
   
   ここに同じ記述を書く。
   
   }


}
実行する場合↓
new 任意のclass名(引数を取る)

これを以下の通りにコンパクトにまとめることができます！

window.addEventListener('DOMContentLoaded',function(){　←ブラウザがloadした時に発動
   new TopAnime('.mvCatch', 200);
   new TopAnime('.mvCatch02', 400);
   new TopAnime('.mvCatch_sub', 600);
});


class TopAnime{　←TopaAnimeというcclass名
   constructor(a,b){　←引数aとbを取る
       this.a = $(a);　←aはclassのa
       this.b = b; ←bはこのTopAnime内のb
       setTimeout(this._addAnime.bind(this),this.b);
   }
   _addAnime(){  ←_addAnime関数を作成し、aにactiveというclassを付与
       this.a.addClass("active");
   }
}

setTimeout内ではthisはグローバルをみてしまうため、bindで束縛しました。
setTimeout(this._addAnime.bind(this),this.b);

こうすることで、同じような記述がある場合にコンパクトにすることができますし、修正が発生した場合でもすぐに対応が可能です！！