CODEWITHSUNDEEP
javascriptes6-class
Nick09
Nick09

Reputation: 228

Call method from parent class inside child class

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?

Upvotes: 0

Views: 933

Answers (3)

nick zoum
nick zoum

Reputation: 7285

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.

Upvotes: 6

Jaromanda X
Jaromanda X

Reputation: 1

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

Upvotes: 1

Ruckert Solutions
Ruckert Solutions

Reputation: 1301

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
  }

}

Upvotes: 2

Related Questions