ES6のクラス構文を使ってみる

ES6のクラス構文を使ってみたのでまとめてみます。

対応状況

はここで確認

クラスの定義

class Particle {
    //初期化
    constructor() {
            this.fillColor = 'rgba(54,59,123,0.8)';
            ・・・
        }
    //メソッド
    appllyForce(forceVector) {
        ・・・
    }
}

newなしで普通の関数の呼び出しのように呼ぶとエラーが出るみたい。

constructorはnew演算子で初期化するときに実行される。その下に関数のブロックを書いていく。

var Particle = class {
  constructor() {
    this.fillColor = 'rgba(54,59,123,0.8)';
  }
};

このような式の書き方でも定義できる。

継承のしかた

継承するときは以下のように書く。コンストラクタ内、メソッド内でsuperを使うと親のメソッドやプロパティを呼び出すことができる。ビルドインオブジェクトも拡張できるそう。

//粒子クラスを継承したオレンジの丸い粒のクラス
class circleYellowParticle extends Particle {
    constructor() {
            //継承元のコンストラクタをsuper()で呼び出す
            super();
            this.fillColor = 'rgba(249,215,2,0.8)';
            ...
        }
        //力の足し算
    appllyForce(forceVector) {
        //継承元のメソッドもsuper()で呼び出す
            super.appllyForce(forceVector);
        }
}

ES5のjsしか触ったことが無かったので、ずいぶんすっきり書けることにびっくり・・・！
書いたものはこんな感じ↓

See the Pen particle by kana (@kanaparty) on CodePen.

余談

ES6のクラスの書き方を調べていたら

staticメソッド
ゲッター
セッター
という言葉が出てきたのですがよくわからなかったので勉強します。。。

参考

すごくまとまっています。
私の場合はまずES5から！
どうやってECMAScript 6を学び始めるか

cavas要素は大きさをwidth height属性で指定する。

style属性で指定すると引き伸ばされたように見える。

var canvas = document.getElementById('canvas');
//これは引き伸ばされる
canvas.style.width = windowWidth + 'px';
//こっちが引き伸ばされない
canvas.setAttribute('width', windowWidth);