Call method from parent class inside child class

Question

I've recently started to learn about Classes in javascript and while reading some really interesting stuff I thought of trying some of my own ideas.

If you have a parent class of Parent in which you have a method of logSomething```` and a child class ofChild, with which you doclass Child extends Parent, how can you then execute the inherited method from the parent class,logSomething```, inside of the child class?

If you define a method inside of the Child class and add this.logSomething() to that method, whenever the method from the child class is called, the inherited logSomething function will indeed run, but apart from that I haven't found any way of executing the logSomething directly inside of that child class.

I've tried this.logSomething(), I've tried adding it to a object, self executing (IIFE) function and everything I could thing of but to no result.

class Parent {
  constructor() {}

  logSomething() {
    console.log('I am logging something')
  }

}

class Child extends Paren {
  logSomething() // This does not work
}

Currently doing this does not work, if throws a error referring to the fact that it things your trying to define a function.

I know it should be possible in some way, if I'm not mistaking React uses something similar with life-cycle methods right? Such as componentWillMount.

How would one go about doing this?

See https://stackoverflow.com/a/43591507/673457 – Ted Whitehead Sep 12 '19 at 13:29 — Ted Whitehead, Sep 12 '19 at 13:29

nick zoum · Accepted Answer · 2019-09-12T13:40:00.080

5

First error is that you are extending Paren instead of Parent.
Also you cannot just throw a random statement inside in a class. It needs to be inside a function.
If you want it to run whenever you create an instance of that class it should be inside the constructor or a function that gets called by it. (note that you need to call super() at the start of the constructor.
Finally, you still need to use this.logSomething or this.logSomething

class Parent {
  constructor() {}

  logSomething() {
    console.log('I am logging something');
  }

}

class Child extends Parent {
  constructor() {
    super();
    this.logSomething(); // Will use Parent#logSomething since Child doesn't contain logSomething
    super.logSomething(); // Will use Parent#logSomething
  }
}

new Child();

class Parent {
  constructor() {}

  logSomething() {
    console.log('Parent Logging Called');
  }

}

class Child extends Parent {
  constructor() {
    super();
    this.logSomething(); // Will call Child#logSomething
    super.logSomething(); // Will call Parent#logSomething
  }

  logSomething() {
    console.log('Child Logging Called');
  }
}

new Child();

You could also do this:

class Parent {
  constructor() {}

  logSomething() {
    console.log('Parent Logging Called');
  }

}

class Child extends Parent {
  logSomething() {
    console.log('Child Logging Called and ...');
    // Careful not use this.logSomething, unless if you are planning on making a recursive function
    super.logSomething();
  }
}

new Child().logSomething();

You can call any function or use any property of the parent class using this, as long as the new class doesn't have its own definition for that property.

edited Sep 12 '19 at 13:40

answered Sep 12 '19 at 13:31

nick zoum

7,216
7
36
80

Very detailed, I like it, I have just one question left, how come in ```React``` you can do ```componentWillMount() { // after the component mounts it runs whatever is in here }```? It there some kind of special manipulation going on under the hook that allows for this? – Nick09 Sep 12 '19 at 13:48
@Nick09 I'm confused as to why that could be an issue. – nick zoum Sep 12 '19 at 13:50
Its not a issue, I was just wondering if there's any explanation for that, because everything tied to the ```JavaScript Class System``` seems to reflect in ```React```, everything but this and I was wondering why :) – Nick09 Sep 12 '19 at 14:11
I still don't understand, why you think `componentWillMount` should throw an error in React? – nick zoum Sep 12 '19 at 14:13
because you write it directly inside the body of the ```Child``` that ```extends Component``` like this ``` componentWillMount() { // after the component mounts it runs whatever is in here }``` as opposed to the method that you've just detailed for us, that needs to be called inside the ```constructor``` or from inside another function. With ```React``` and ```componentWillMount``` you don't do it inside the ```constructor```, you do it directly in the ```block scope``` of the class, so directly inside the ```class Child extends Parent { componentWillMount() { // code to execute } }``` – Nick09 Sep 12 '19 at 14:31
@Nick09 In the last example isn't `logSomething` in the scope of the class? What's the difference? – nick zoum Sep 12 '19 at 14:59
in my mind, the difference was that the ```logSomething``` that is inside the ```block scope``` of the class if called from outside with ```new Child().logSomething();```. But now I understand, ```React``` probably works the same way, you add the ```componentDidMount``` function, or whatever else, and then ```React``` probably checks the child components to see if they have any of those functions defined in them, and if they do, it runs them. So when you do ```componentDidMount() { // run code }``` is just does ```new Child().component()```. Is this right? – Nick09 Sep 13 '19 at 08:39

score 2 · Answer 2 · answered Sep 12 '19 at 13:35

2

Look here for more information.

class Parent {
  constructor() {}

  logSomething() {
    console.log('I am logging something')
  }

}

class Child extends Parent {
  logSomething() {
    super.logSomething(); // Call parent function
  }

}

answered Sep 12 '19 at 13:35

Lumpenstein

1,250
1
10
27

you can use `this.logSomething()` in a function in the child that isn't called `logSomething` :p – Jaromanda X Sep 12 '19 at 13:39
@JaromandaX That is incorrect, you need to not have a function or property called `logSomething`, to be able to use `Parent#logSomething` using `this.logSomething` – nick zoum Sep 12 '19 at 13:43
Yes, in my solution you override the parent function and call the parent function inside of the child function ;) – Lumpenstein Sep 12 '19 at 13:43
@nickzoum - you misunderstood my comment, but I forgive you – Jaromanda X Sep 17 '19 at 23:29

score 1 · Answer 3 · answered Sep 12 '19 at 13:37

a) you can't call a function there, you can call a function within a function declared in a class

b) you need to use this.logSomething()

example:

class Parent {
  constructor() {}
  logSomething() {
    console.log('I am logging something')
  }

}

class Child extends Parent {
  fn() {
    this.logSomething() // This does work
  }
}
new Child().fn()

See other answers for when fn is called logSomething in the child class - then you'd need super.logSomething() to call the "parent" logSomething instead of the child logSomething

Call method from parent class inside child class

3 Answers3