Call Child Method from Parent

Call child method from parent

As a JavaScript developer, you may come across a situation where you need to call a method defined in a child class from its parent class. This can be achieved using different approaches depending on the specific scenario. In this article, we will explore multiple solutions to this problem.

Solution 1: Using the prototype chain

One way to call a child method from its parent is by utilizing the prototype chain. JavaScript objects have a prototype property that allows access to methods and properties defined in their prototype object.

Here’s an example:


// Parent class
function Parent() {}

// Child class
function Child() {}

// Inherit from Parent
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

// Define a method in Child
Child.prototype.childMethod = function() {
  return "Child method called!";
};

// Create an instance of Child
var childInstance = new Child();

// Call childMethod from Parent
Parent.prototype.callChildMethod = function() {
  return this.childMethod();
};

// Call the method
var result = childInstance.callChildMethod();
console.log(result); // Output: "Child method called!"

In this solution, we create a parent class and a child class. We then define the childMethod in the Child class. By extending the prototype chain, the Parent class gains access to the childMethod. We add a callChildMethod method to the Parent prototype, which calls the childMethod using the this keyword.

Solution 2: Using ES6 classes

If you’re using ECMAScript 2015 (ES6) or newer, you can use the class syntax to achieve the same result in a more concise way.

Here’s an example:


// Parent class
class Parent {
  callChildMethod() {
    return this.childMethod();
  }
}

// Child class
class Child extends Parent {
  childMethod() {
    return "Child method called!";
  }
}

// Create an instance of Child
const childInstance = new Child();

// Call the method
const result = childInstance.callChildMethod();
console.log(result); // Output: "Child method called!"

In this solution, we define the Parent class using the class syntax and the childMethod within the Child class. The Child class extends the Parent class, inheriting its methods and properties. We then create an instance of the Child class and call the callChildMethod, which internally calls the childMethod.

Solution 3: Using composition

If you prefer a more flexible approach, you can use composition to call a child method from its parent. Composition involves creating an instance of the child class within the parent class and accessing its methods directly.

Here’s an example:


// Parent class
function Parent() {
  this.childInstance = new Child();
}

// Child class
function Child() {}

// Define a method in Child
Child.prototype.childMethod = function() {
  return "Child method called!";
};

// Call childMethod from Parent
Parent.prototype.callChildMethod = function() {
  return this.childInstance.childMethod();
};

// Create an instance of Parent
var parentInstance = new Parent();

// Call the method
var result = parentInstance.callChildMethod();
console.log(result); // Output: "Child method called!"

In this solution, we create an instance of the Child class within the Parent constructor. This allows us to directly access the childMethod of the childInstance from the Parent class.

These are three different solutions to call a child method from its parent in JavaScript. Choose the one that best suits your specific use case and coding style.

Remember to always consider the design and architecture of your application when deciding which approach to use. Happy coding!

Call Child Method from Parent