Executing a Parent Method from an Overridden Method in a Child Class

Question

Executing a Parent Method from an Overridden Method in a Child Class

Is it possible to call a method from a parent class that has been overridden in the child class? Below is an example where I want to access the bar.my_name() method from within the foo.my_name() overriding method.

function bar() {
  this.my_name = function() {
    alert("I Am Bar");
  }
}

function foo() {
  this.my_name = function() {
    alert("I Am Foo");
    //access parent.my_name()
  }
}

foo.prototype = Object.create(bar.prototype);
foo.prototype.constructor = foo;

var test = new foo();
test.my_name();

javascript class inheritance methods overriding

Answer 1

Answer №1

Here's a way to approach it:

(new bar()).my_name.call(this);

Your understanding of prototypes may need clarification, as they might not be beneficial in this situation.

An alternative method could be:

var bar = {
    my_name: function () {
        console.log('bar name');
    }
};

var foo = Object.create(bar);

foo.my_name = function () {
    console.log('foo name');
    bar.my_name.call(this);
};

If constructors are preferable, consider something like the following:

function Bar () {}

Bar.prototype.my_name = function () {
    console.log('bar name');
};

var foo = Object.create(Bar.prototype);

foo.my_name = function () {
    console.log('foo name');
    bar.my_name.call(this);
};

Without more context on your goals, it's challenging to provide tailored advice.

Answer 2

Here's a way to approach it:

(new bar()).my_name.call(this);

Your understanding of prototypes may need clarification, as they might not be beneficial in this situation.

An alternative method could be:

var bar = {
    my_name: function () {
        console.log('bar name');
    }
};

var foo = Object.create(bar);

foo.my_name = function () {
    console.log('foo name');
    bar.my_name.call(this);
};

If constructors are preferable, consider something like the following:

function Bar () {}

Bar.prototype.my_name = function () {
    console.log('bar name');
};

var foo = Object.create(Bar.prototype);

foo.my_name = function () {
    console.log('foo name');
    bar.my_name.call(this);
};

Without more context on your goals, it's challenging to provide tailored advice.

Answer 3

Answer №2

To solve this issue, one approach could be transferring the method to the prototype of the base class.

function bar() {
}

bar.prototype.my_name = function() {
  alert("I am bar");
}

function foo() {
}

foo.prototype = Object.create(bar.prototype);
foo.prototype.my_name = function() {
    alert("I Am Foo");
    bar.prototype.my_name.call(this);
}

foo.prototype.constructor = foo;

var test = new foo();
test.my_name();

Answer 4

To solve this issue, one approach could be transferring the method to the prototype of the base class.

function bar() {
}

bar.prototype.my_name = function() {
  alert("I am bar");
}

function foo() {
}

foo.prototype = Object.create(bar.prototype);
foo.prototype.my_name = function() {
    alert("I Am Foo");
    bar.prototype.my_name.call(this);
}

foo.prototype.constructor = foo;

var test = new foo();
test.my_name();

Executing a Parent Method from an Overridden Method in a Child Class

Answer №1

Answer №2

Similar questions

Reading environment variables in Next.js (specifically in an Azure App Service)

Remove the color options from the Material UI theme

Deciphering the node.js code: Understanding the significance of the syntax `(res) =>`

Transforming a JavaScript object into a different shape

What is the best way to retrieve the value of a textbox in AngularJS?

Unable to access an HTML element using refs within the render() method

Uncovering unseen tags generated by JavaScript on a webpage using Python

When attempting to install material UI in my terminal, I encounter issues and encounter errors along the way

Connect main data to sub-component

Refresh the page once the function has been executed

Reversing the order of input-group-addon and input in bootstrap on mobile devices

The concept of 'this' remains undefined when using a TypeScript Property Decorator

"Encountering issue with the find() function following a successful outcome

The requested resource in Mean stack does not contain an 'Access-Control-Allow-Origin' header

Am I utilizing the htmlspecialchars function properly?

Is it possible to import a component from a production build of create-react-app?

Guide on how to showcase an array in a string format using table rows in JavaScript or jQuery

Is there a way to transform an array of strings into an object?

Understanding React: Why 'props' Property Cannot Be Read

Is there a way to verify if a React hook can be executed without triggering any console errors?