从派生类访问属性

Question

abstract class Base {
  constructor() {
    console.log(this.components)
  }
  components = ['']
}
class Child extends Base {
  components = ['button', 'text']
}

const f = new Child()

Running this code, I get

[''] 

But I would rather like to get

['button', 'text']

from the derived Class. Reason I want to do this: I want to validate the "components"-property, which the user defined in the Child. Is it not possible ?

Answer 1

The components property is being set just after the constructor in the base class has been called:

abstract class Base {
  constructor() {
    console.log(this.components)
  }

  components = ['']
}

class Child extends Base {
  constructor() {
    // inherited components from base = ['']
    super() // Call base constructor

    // this.components = ['button', 'text']
  }

  components = ['button', 'text']
}

const f = new Child()

You need to wait for the base constructor to synchronously complete, before you can access the new values - ie. by using setTimeout :

constructor() {
  setTimeout(() => console.log(this.components))
}

---

Ideally you should pass the components as parameters:

abstract class Base {
  constructor(public components = ['']) {
    console.log(components)
  }
}

class Child extends Base {
  constructor() {
    super(['button', 'text'])
    // this.components = ['button', 'text']
  }
}

const f = new Child()

Answer 2

try this:

abstract class Base {
  constructor(components) {
    console.log(components)
  }
}
class Child extends Base {
  constructor() {
    super(['button', 'text'])
  }
}

const f = new Child()

or

abstract class Base {
  constructor(components) {
    console.log(components)
  }
}
class Child extends Base {

}

const f = new Child(['button', 'text'])