Expanding Functionality with JavaScript Function Classes

I've created a standard base class like this:

MyBase = function() {
    this.m_Stuff = 0; // etc
};
MyBase.prototype.MySuperFunction = function (arg1) {
    alert("Hello" + arg1);
};

Next, I defined another class that inherits MyBase:

MyChild = function () {
    MyBase.call(this);
    this.m_OtherStuff = 1; // etc
};
MyChild.prototype = new MyBase(); // inherit

However, I want to override MyBase's MySuperFunction with an improved version while still calling the original base class function:

MyChild.prototype.MySuperFunction = function (arg1, arg2) {
    MyBase.MySuperFunction(arg1); // THIS IS THE PART I'M UNCERTAIN ABOUT
    alert("You are a " + arg2 + "'th level idiot");
};

Is it possible for a child class to override its base class function but still call the base class function in the new definition?

If so, how can this be achieved?

Answer №1

The concept is akin to invoking the method in your inherited constructor. You still have access to the "super" method through MyBase.prototype.MySuperFunction (where it was assigned), so you can utilize:

MyBase.prototype.MySuperFunction.call(this, arg1);

For a more flexible approach, you could consider using Object.getPrototypeOf to retrieve the prototype, with caution for dynamic inheritance. In cases where multiple methods require calling their parent, creating an alias for MyBase.prototype as a variable like super, accessible to all functions on the Child prototype object, may prove beneficial (refer to this example for details).

Answer №2

Kindly implement the following steps:-

MyBase.prototype.MySuperMethod.call(this, argument);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to grasp the concept of nested scope within AngularJs

I found myself puzzled while reading an article on this particular website (pitfall #5): My query is: Does this situation resemble having two variables with the same name in plain JavaScript, where one is locally defined (e.g. within a nested function ...

What is the best way to replicate the Ctrl+A action on an element using jQuery or JavaScript?

Is there a way to trigger the Ctrl+A key combination in a textarea element when a specific event occurs, without resorting to caret positioning or selecting all text separately? I'm looking for a method that simulates hitting Ctrl+A using a cross-brow ...

What is the best way to push an object directly outward in the camera's view in Three.js?

My understanding is that finding a direction vector and multiplying it by the coordinates is necessary for this task, but I am unsure how to proceed with this method. Unfortunately, I have not been able to locate the information needed to find a solution ...

Utilizing Javascript in Owl Carousel 2 to Filter Items While Preserving the Sort Order

Currently, I am utilizing Owl Carousel 2 in combination with a filtering example to create a filter menu. When titles in the filter menu list are clicked, all other items in the carousel disappear. This functionality works flawlessly, except for the fact t ...

Are several UDP sockets open across various ports?

I'm trying to get the port of a receiving server using the following code snippet: var dgram = require("dgram"); var start = 27015; for(var i = start; i < (start + 100); i++) { var server = dgram.createSocket("udp4"); server.on("message ...

Styling a nested scrollbar using JQuery

I am looking to customize two scrollbars using a jquery plugin or JS library. Here is the HTML code: <div id="container"> <div class="fixedHeightContainer"> <div class="fixedHeightContent"> Lorem ipsum dolor sit amet, con ...

JavaScript matching partial domains

let address = 'http://sub.domain2.net/contact/'; if (['https://sub.domain1.com/', 'http://sub.domain2.net/'].includes(address)) { console.log('match'); } else { console.log('no match'); } Here, it ...

What is the reason behind the constant return of Boolean.FALSE for Class.isLocalClass()?

My function always returns "-undefined-" no matter what. public static String getStereoType(Class<?> clazz) { String result = "-undefined-"; if (clazz.isEnum()) { result = "enum"; } else if (clazz.isInterface()) { result ...

Issues with arrays and objects not functioning properly in local storage

Currently, I am working on implementing a TODO list that utilizes local storage to store data. Unfortunately, I have encountered an issue in my code that I am struggling to fix. In the getTaskArray() function, I retrieve an array from local storage using ...

In Javascript, implement a pull-to-refresh feature that keeps track of the Last

Just starting out in the world of coding, not a pro! I'm comfortable with PHP but a total beginner when it comes to Javascript. In short, how can I store the last id variable from JSON to prevent my AJAX request from fetching content it already has? ...

HTTPInterceptor failing to capture incoming HTTP requests from external widget in Angular

Within my application, I incorporate a third-party UI widget obtained from the npm registry as a dependency. This widget makes a GET request using the axios module when integrated into my app's user interface. However, I have observed that the HTTP G ...

Expanding Form Fields with jQuery: A Step-by-Step Guide

I am having trouble figuring out how to add and remove input fields dynamically on my webpage. I have three input fields with an "+Add More" button, but I can't quite grasp the logic for adding or removing these fields. Currently, I am using HTML and ...

What steps do I need to take to generate a terrain similar to this using Three.js?

Trying to construct a terrain based on a heightmap with an enclosed bottom layer. Refer to this example for clarification: The current function for generating the terrain is as follows: var img = document.getElementById("landscape-image"); var numSegment ...

Issue with Mongoose.connect functionality

Upon executing the command server.js in Node.js, I encountered the following error: C:\Users\Shaelyn\WebstormProjects\CIT366Projects\cms>node server.js C:\Users\Shaelyn\WebstormProjects\CIT366Projects\c ...

Issue with EmberJs: The #each loop is failing to recognize the array that was declared within the component

I'm struggling with this seemingly simple issue, and I could really use some assistance. In the JavaScript file of the component - weekShorts: computed(function() { return new Array('S', 'M', 'T', 'W', &apo ...

Animating the display and concealment of a Ui Bootstrap alert within an AngularJS modal window

Trying to create a dynamic animation for an ng-hide feature used on a Ui Bootstrap alert button within a Ui Bootstrap Modal is proving to be quite challenging. The goal is to have the alert slide in and out while simultaneously fading in and out. Although ...

Having trouble launching the SpeechRecognition feature on Ionic Cordova for Macdonst?

TL; DR: The app wasn't working because I was using it on Android 6.0 and needed to manually grant microphone access permission. Here's the story: I set out to develop an Ionic app that utilizes speech recognition with this plugin: https://githu ...

The function $scope.removeNinja cannot be found

As a beginner in Angular, I encountered an issue while working on a project that involved creating a Directory of ninjas with various functionalities implemented using Angular. Here is a snippet of my HTML file: <!DOCTYPE html> <html lang="en" n ...

Constructing a genealogical chart using a collection of items

Currently, I am working on constructing a family tree using an array of objects in JavaScript. This data is retrieved from a MySQL database and accessed through a PHP page. The information is transmitted from PHP to JavaScript in the form of an array of o ...

Error encountered when attempting to convert a JSON object to a String using JSON.stringify(), due to a cyclic object value

I have a JSON object with the following structure: obj { name: "abc" , entriesList : "list of entry obj" , propertiesList : "list of properties obj" }; In this structure, an entry is also another object entry { info : "data obj" , ...