Invoke the parent function when extending javascript prototype

Question

Invoke the parent function when extending javascript prototype

Below is the Meta-Code I am currently working with:

var Parent = function(){}
Parent.prototype.doSomething = function(){
  console.log("As a parent I did like a parent");
}

var Child = function(){}
Child.prototype = new Parent();
Child.prototype.doSomething = function(){
  console.log("As a child I did like a child");
  //This is where I am unsure 
}

What I want it to achieve in just two lines:

As a child I acted like a child
As a parent I acted like a parent

Although calling a parent function after overriding it raises some doubts for me.

javascript

Answer 1

Answer №1

By utilizing this approach, you can preserve the base method without any hassle:

var Parent = function () {}
Parent.prototype.doSomething = function () {
    alert("As a parent I did like a parent");
}

var Child = function () {}
Child.prototype = new Parent();
Child.prototype.doSomething = (function () {
    var parent_doSomething = Child.prototype.doSomething;   
    return function () {
        alert("As a child I did like a child");
        parent_doSomething();
    }
})();

var c = new Child();
c.doSomething();

This method removes the need to keep track of who the parent was. However, it is important to verify that the parent actually contains a doSomething method.

Answer 2

By utilizing this approach, you can preserve the base method without any hassle:

var Parent = function () {}
Parent.prototype.doSomething = function () {
    alert("As a parent I did like a parent");
}

var Child = function () {}
Child.prototype = new Parent();
Child.prototype.doSomething = (function () {
    var parent_doSomething = Child.prototype.doSomething;   
    return function () {
        alert("As a child I did like a child");
        parent_doSomething();
    }
})();

var c = new Child();
c.doSomething();

This method removes the need to keep track of who the parent was. However, it is important to verify that the parent actually contains a doSomething method.

Answer 3

Answer №2

To achieve this, one method is to use the syntax

Parent.prototype.method.call(this, arg1, arg2, ...)

. For more information on super calls, you can refer to THIS LINK.

var Child = function(){}
Child.prototype = new Parent();

Child.prototype.doSomething = function(){
  console.log("I acted like a child as a child");
  Parent.prototype.doSomething.call(this); //this line here
}

Answer 4

To achieve this, one method is to use the syntax

Parent.prototype.method.call(this, arg1, arg2, ...)

. For more information on super calls, you can refer to THIS LINK.

var Child = function(){}
Child.prototype = new Parent();

Child.prototype.doSomething = function(){
  console.log("I acted like a child as a child");
  Parent.prototype.doSomething.call(this); //this line here
}

Invoke the parent function when extending javascript prototype

Answer №1

Answer №2

Similar questions

When working with Angular 12, the target environment lacks support for dynamic import() syntax. Therefore, utilizing external type 'module' within a script is not feasible

Utilize Firestore's limit feature with variables

Using Axios to Integrate an API - Displaying a Username and Password Pop-up

"Sending a file (Image) through NextJS API Routes to an external API: A step-by-step guide

Issue with getStaticProps in Next.js component not functioning as expected

Could anyone lend a hand in ensuring that my AJAX call successfully processes the parameters?

Utilizing Draft JS to dynamically insert text in the form of span

How can I remove markers from google maps?

A guide on tallying the characters within an input text

Incorporating images into CSS using an npm package

I'm not skilled in programming, so I'm not sure what the problem is with the code

Tracking tool for monitoring progress of HTTP POST requests

Avoid opening the page when attempting to log in with jquery, ajax, and php

Tips for refreshing HTML multiple file upload without reloading the page

The jquery function is functioning properly, but it only behaves as expected when clicked

Include a parent class within the style tags in your CSS code

Detecting when the "enter" key is pressed using Jquery instead of relying on a mouse click

Using PHP functions in an AJAX request

Drawing on Canvas with Html5, shifting canvas results in significant issues

Guide on how to use a tooltip for a switch component in Material-UI with React