◆ constructor を書かなくていいので super を書く手間もなくなる
◆ 外部に渡すメソッドをアロー関数で定義すれば this が固定できる

JavaScript でプロパティを直接 class {} の中に書けるようになりましたが 個人的にはプロパティ定義が散らばるので constructor の中だけに収まっててくれるこれまでのが良かったです
ですが 試してみるとこれの良い部分を見つけました

super 呼ばなくていい

ひとつめは constructor を書かなくていいので super() を書かなくて済みます
よく書き忘れてエラーになりますし 引数をそのまま渡す必要があると

class A extends B {
constructor(...a){
super(...a)
something()
}
}

のように全部を受け取る必要もあっていくつも作ると面倒になってきます
基本 constructor に書くことはなにか処理して this への代入というものなので プロパティで書けます
そうすると constructor を作る必要がなくなるので super 呼び出し忘れとかもなくなります

this の bind の手間が減る

普通のメソッド記法ではアロー関数のように this を固定してくれません

class X { foo(){ console.log(this) } }
const foo = new X().foo
foo()
// undefined

こうなります
クラス構文を使って作ってるのだから this を変更したいことなんてまずないので メソッド記法では this は固定にしておいてほしいものです

これはリスナやその他コールバックとして渡すときに困ります

class C {
showThis(){
console.log(this)
}

method(){
fn(this.showThis)
}
}

function fn(cb){
cb()
}

new C().method()
// undefined

さっきと同じように undefined です
showThis のところで this を使った処理をしたいのに this がインスタンスになってないので動きません

渡すときに毎回 bind するかインスタンス作成時に全メソッドを bind 済みのプロパティとして再定義しておくこともできますけどけっこう面倒です
もっと簡単にやりたいです

そこで使えるのが プロパティ記法でアロー関数を使うことです

class C {
showThis = () => {
console.log(this)
}

method(){
fn(this.showThis)
}
}

function fn(cb){
cb()
}

new C().method()
// C {showThis: ƒ}

定義をアロー関数に置き換えるだけです

これまででもコンストラクタに書けばできはしたのですが そうすると全メソッドの定義をコンストラクタに書くことになって ほぼコンストラクタしかない状態になりました
コンストラクタで全メソッド定義ならただの関数で十分になります

const ctor = () => {
return {
foo: () => {
},
bar: () => {
},
}
}

プロトタイプ使わないわけですから継承しない限りこれでいいですよね

そういう問題があったのですが アロー関数を class {} の中で書けるようになることで便利になりました

class の中が普通のブロックみたいに

便利なところもありましたが この構文ができると class のブロックが普通の if とかのブロックと同じような感じの見た目になります
代入式とか使えるわけですからね

class C {
a = Date.now()
b = 1000
c = this.a / this.b
d = Math.random()
e = ~~(this.d * 100)
}

特に意味ないものですが こういう見た目にもなります
なんか Python ぽさもあります

ただ代入式である必要があるのでここで console.log とかはできません
やろうとすれば 使わないプロパティ名に代入という方法ができますし即時関数実行すれば if や for などのステートメントも一応できます

class C {
a = 10
b = 20
c = this.a + this.b
_ = console.log(this.c)
_ = (() => {
this.c++
if(this.c > 20) {
console.log("shown")
} else {
console.log("not shown")
}
})()
skip_next = Math.random() > 0.5
_ = (skip => {
if(skip) return
for(let i = 0; i < 7; i++) {
console.log(i)
}
})(this.skip_next)
p = (async () => {
await new Promise(r => setTimeout(r, 1000))
console.log("1 sec waited")
})().then(e => console.log("end"))
}
new C
30
shown
0
1
2
3
4
5
6
1 sec waited
end

内部的には constructor での実行になるためか await は使えませんでした
async な即時関数実行をすれば一応動かせますが処理はインスタンス作成終了後に行われます