Is there any way this is possible in ES6 -- or is there a nice solution if it isn't (as seems likely):
class Parent {
constructor() {
console.log(this.name);
}
}
class Child extends Parent {
name = "Child Name";
}
const c = new Child();
// Should console.log "Child Name";
(Coming from Python, where it totally works!)
A parent's constructor is called before the child can initialize their instance data so you can't refer to a child's instance in the parent's constructor. That's just wrong OOP design (at least in Javascript). If the parent wants access to a property in the constructor, then define and initialize the property in the constructor of the parent (the child can still use it).
Parents should not depend upon children - children depend upon the parent.
So, this is flawed OOP design. You don't show the actual problem you're trying to solve so we can't really suggest what the correct design would be for the actual problem.
To review, the order of things is:
super(...) to execute parent constructorIf using ES6 class definitions, you don't get to change this sequencing to something different.
Based on your latest comment to this answer, I don't think there's really a better way, than just adding the extra lines of code to each child:
class Parent {
constructor(name) {
if (!name) {
// could also throw an exception here if not
// providing a name is a programming error and is not allowed
this.name = "Default Name";
} else {
this.name = name;
}
console.log(this.name);
}
}
class ChildA extends Parent {
constructor() {
super("ChildA Name");
}
}
class ChildB extends Parent {
constructor() {
super("ChildB Name");
}
}
const c = new ChildA();
// Should console.log "ChildA Name";
To retain the value of the name property of the parent, you can simply leave the constructor out of your child class. Alternatively, if you want to update a specific property (name in this case) then you need to set this.name in the constructor AFTER a call to super() - an explicit call to super() is required before you can set this properties, otherwise JavaScript will throw an error.
Here is an example of what I try to explain above:
class Parent {
constructor() {
this.name = "Parent Name";
}
}
class ChildWithConstructor extends Parent {
constructor() {
super();
this.name = "Child Name";
}
sayName() {
console.log(`The constructor call updated the property value set in the parent contructor: ${this.name}`)
}
}
class ChildWithoutConstructor extends Parent {
sayName() {
console.log(`No constructor call retains the property values set in the parent contructor: ${this.name}`)
}
}
const c = new ChildWithConstructor();
const nc = new ChildWithoutConstructor();
c.sayName();
nc.sayName();
There is a nice way
notice that this.constructor is the class regardless of where it is executing.
so we can use it to hang data.
class Parent{
static prop = "default property"
constructor(){
console.log(this.constructor.name, this.constructor.prop)
}
}
class Child extends Parent{
static prop = "new property"
}
new Parent()
new Child()
the only way is to call a method named init on the child constructor and define on the parent class and use init method as your parent constructor.
in this way init will be called when child properties are ready
class Parent {
constructor() {
}
init() {
console.log(this.name);
}
}
class Child extends Parent {
name = "Child Name";
constructor() {
super();
// call parent init
this.init();
}
}
const c = new Child();
From the parent class, access to the fields of the child class cannot be obtained. From child to parent - you can use super.
class Parent {
constructor() {
this.name="Parent Name";
};
}
class Child extends Parent {
constructor(){
super(name);
console.log(this.name);
this.name = "Child Name";
console.log(this.name);
}
}
const c = new Child();
as I know, function should be opposite of attributes.
class Parent {
constructor() {
console.log(this.name());
}
}
class Child extends Parent {
name() {
return "Child Name";
}
}
const c = new Child();
// Should console.log "Child Name";if you want to change, instead of doing this.name = 'something',
you can make a function
setName(newName){
this.name = function(){
return newName
}
}
yes it is ugly to set a new value and I'm not even sure if if works.
If that props using in constructor only, pass as args.
class Parent {
constructor(name="Parent Name") { console.log(name); }
}
class Child extends Parent {
constructor() { super("Child Name"); }
}
If you want, use getter or static. See @FLAW's answers.
But why don't you move the constructor logic to an other method. It's more simple.
class Parent {
name = "Parent Name";
hello() { console.log(this.name); }
}
class Child extends Parent {
name = "Child Name";
}
class Parent {
get name() { return "Parent Name"; }
constructor() { console.log(this.name); }
}
class Child extends Parent {
get name() { return "Child Name"; }
}
// getName() works, too.
class Parent {
static name = "Parent Name";
constructor() { console.log(this.constructor.name); }
}
class Child extends Parent {
static name = "Child Name"
}
Another thing of great importance is the load order if you keep the classes in seperate files.
I had the following JS files:
map.js
class Map {
constructor() {
this.tileWidth = 32;
this.tileHeight = 32;
}
}
camera.js
class Camera extends Map
{
constructor() {
super();
this.viewPortXTiles = 20;
}
viewport()
{
var viewPortX = this.tileWidth * this.viewPortXTiles;
console.log(this.tileWidth);
}
}
This will return undefined if the load order loads camera.js first. So either put them in the same file or call the camera.js file: map_camera.js
