クラスの継承extendsとsuperを使用した同じ機能のクラスを作ろうとした際の挙動について

Question

なんとなくおこなっていたのですが、extends、superを用いたら全く同じクラスの違う名前のものを作れると思いやってみると

class FormatDate extends Date {
  constructor(a,b,c,d,e,f,g) {
    super(a,b,c,d,e,f,g);
  }
}
console.log(new Date);
// Tue Jun 18 2019 17:18:50 GMT+0900 (日本標準時)
console.log(new FormatDate);
// Invalid Date

と同じインスタンス機能を持つインスタンスが生成されませんでした。extendsでDateクラスのメソッドやプロパティを継承してsuperでコンストラクターも同じものにしたつもりです。

なぜ同じ機能のインスタンスではないのでしょうか？
（コンストラクタの引数の数はDate.lengthでみたものです）

私のイメージではnew FormatDateした際も日付が出てきて来るかと思っていました

Comments

[miyabi_pudding]

ブラウザ実行でのJavaScriptですか？
であれば、ブラウザを記載してください。
ブラウザによっては挙動が違う可能性があります。

Answer 1

Dateは引数の数を見て処理を切り分けるので（ES9）、FormatDateが引数無しで呼ばれた場合には、Dateコンストラクタを引数無しで呼ぶようにしなければいけません。

方法は2つ考えられます。

• FormatDateのコンストラクタ自体を省略する
• constructor(...args)として、super(...args)で引数の数まで再現するように渡す

Comments

[domidomi]

明確な回答ありがとうございます。大変参考になります。

Answer 2

原因がわかりましたので、回答させていただきます。
constructorの引数の設定が原因です。
下記のように、
引数の数を、限定しない書き方なら、しっかり動きました。

class FormatDate extends Date {
  constructor(...args) {
    super(...args);
  }
}
console.log(new Date);
// Tue Jun 18 2019 17:18:50 GMT+0900 (日本標準時)
console.log(new FormatDate);
// Tue Jun 18 2019 17:18:50 GMT+0900 (日本標準時)

おそらくですが、class構文が、糖衣構文であるということもあり、
プロトタイプベースのDateクラスでの動きと整合性をとるために、
内部でいろいろとやっているのかと。

また、constructor内容が、スーパークラスとサブクラスで同じ場合は、サブクラスのconstructorは省略できるようです。

class FormatDate extends Date {
  // constructorが同じ内容なら、省略可能
}
console.log(new Date);
// Tue Jun 18 2019 17:18:50 GMT+0900 (日本標準時)
console.log(new FormatDate);
// Tue Jun 18 2019 17:18:50 GMT+0900 (日本標準時)

Comments

[domidomi]

ご回答ありがとうございました。
はずかしながら糖衣構文という言葉を初めて知りました。勉強になります。