JavaScript Class Inheritance - 填充方法不起作用

Question

Problem

I am attempting to create two classes, where one is a subclass of another, and populate the private variables in the constructor via fill method. However, when using the fill method to populate the parent class private variables, these variables disappear when initializing the sub class.

class RequestFile {
    constructor (args = {}) {
        // this.to = args.to ? args.to : []
        // this.files = args.files ? args.files : []
        // this.body = args.body ? args.body : ''
    }
    fill ({to=[],files=[], subject='', body='', }) {
      this.to = to
      this.files = files
      this.subject = subject
      this.body = body
    }
}

class Mail extends RequestFile {
    constructor (args = {}) {
      super(args)
      this.fill(args)
    }
    fill ({cc='', draft=false, preview=true}) {
      this.cc = cc
      this.draft = draft
      this.preview = preview
    }
    to() {
      console.log(this.to)
    }
}
let mail = new Mail({
  to: [ 'name@gmail.com' ],
  files: [ 1111 ],
  subject: 'Sent from Node',
  body: 'test body  -- sent from node',
  cc: [ 'anotherone@gmail.com', 'another@gmail.com' ],
  draft: true,
  preview: true
})

console.log(mail)

The above outputs the following:

Mail {
cc:(2) [...],
draft: true ,
preview: true
}

Uncommenting the code in RequestFile Class yields a different result:

class RequestFile {
    constructor (args = {}) {
        this.to = args.to ? args.to : []
        this.files = args.files ? args.files : []
        this.body = args.body ? args.body : ''
    }
    fill ({to=[],files=[], subject='', body='', }) {
      this.to = to
      this.files = files
      this.subject = subject
      this.body = body
    }
}

Mail {
to:(1) [...],
files:(1) [...],
body: "test body -- sent from node" ,
cc:(2) [...],
draft: true ,
preview: true
}

Ideally, I would like to rely on the fill method to populate the class variables, I'm just confused as to why it works in the subclass (Mail) but doesn't work in the parent class (RequestFile)

Answer 1

From the fill() method in the child class, call the inherited fill() method of the base class. Use the special arguments variable to pass on the original parameter before object deconstruction was applied.

You can then even move the call to fill() to the base class constructor and don't have to call the fill method from the child class constructor.

class RequestFile {
    constructor (args = {}) {
        this.fill(args);
    }

    fill ({to=[],files=[], subject='', body='', }) {
      this.to = to
      this.files = files
      this.subject = subject
      this.body = body
    }
}

class Mail extends RequestFile {
    constructor (args = {}) {
      super(args)
    }

    fill ({cc='', draft=false, preview=true}) {
      // pass on original parameter to base class fill method
      super.fill(arguments[0])
      this.cc = cc
      this.draft = draft
      this.preview = preview
    }
    to() {
      console.log(this.to)
    }
}

---

An alternative solution is to use different names for the fill methods in the base and child classes:

class RequestFile {
    constructor (args = {}) {
        this.fillRequestFile(args);
    }

    fillRequestFile ({to=[],files=[], subject='', body='', }) {
      this.to = to
      this.files = files
      this.subject = subject
      this.body = body
    }
}

class Mail extends RequestFile {
    constructor (args = {}) {
      super(args)
      this.fillMail(args);
    }

    fillMail ({cc='', draft=false, preview=true}) {
      this.cc = cc
      this.draft = draft
      this.preview = preview
    }
    to() {
      console.log(this.to)
    }
}

Answer 2

class Mail extends RequestFile {
    constructor (args = {}) {
      super()
      super.fill(args)
      this.fill(args)
    }
    fill ({cc='', draft=false, preview=true}) {
      this.cc = cc
      this.draft = draft
      this.preview = preview
    }
    to() {
      console.log(this.to)
    }
}