JavaScript Class Reference Error

Questioning the mysterious reference error in the JS class from MDN page. The structure of the Bad class's constructor leaves me baffled – is it because the empty constructor calls super() as a default?

class Base {}

class Good extends Base {}

class AlsoGood extends Base {

  constructor() {

   return {a: 5};

   }

}

class Bad extends Base {

  constructor() {}

}

new Good();

new AlsoGood();

new Bad(); // ReferenceError

Answer â„–1

In order to prevent encountering this issue, you have two options: either eliminate the constructor from the class entirely, or ensure that super() is called within the Bad class constructor.

Answer â„–2

Is it because the default behavior of the empty constructor in the Bad class is to call `super()`?

Actually, no - if the empty constructor automatically called `super`, you wouldn't encounter the error.

For a derived class's constructor to be valid, it must manually invoke the parent's constructor using `super`.

In cases where a derived class lacks any explicit constructor, `super` will still be invoked automatically, like so:

class Good extends Base {
}

This effectively translates to the following equivalent code block:

class Good extends Base {
  constructor(...args) {
    super(...args);
  }
}

The rule about automatic inheritance through empty constructors does not apply. If the constructor is defined, `super` will not be automatically called - however, it must be included in the constructor logic.

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

Issues with HTML5 video playback in Apple machines using the Firefox browser

On a website I'm developing, I've included an HTML5 video that works perfectly except for one specific issue - it won't play on Firefox in Apple devices. Surprisingly, it functions well on all other browsers and even on Firefox in Windows an ...

What's causing Angular to not display my CSS properly?

I am encountering an issue with the angular2-seed application. It seems unable to render my css when I place it in the index.html. index.html <!DOCTYPE html> <html lang="en"> <head> <base href="<%= APP_BASE %>"> < ...

Select elements using jQuery in events while excluding others

I need to prevent form submission when the user presses Enter, except for three specific inputs. To prevent form submission on Enter key press, I can use this code: $(document).keydown(function(event){ if(event.keyCode == 13) { event.preventDefault(); re ...

Using JavaScript to trigger an event when there is a change in the innerHTML or attributes

I have come across a jQuery calendar with the capability to scroll through months, and I am interested in triggering an event each time the month changes so that I can assign event listeners to every td element within the table (with days represented by ...

Issue encountered: Unforeseen command: POST karma

Whenever I try to run my test cases, I encounter the following error message: Error: Unexpected request: POST data/json/api.json it("should $watch value", function(){ var request = '/data/json/api.json'; $httpBackend.expectPOST(reque ...

Ways to center the percentage on the progress bar

I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful. Here is the current output for the code: http://jsfiddle.net/G ...

What is the best way to retrieve an element that has been altered in its state?

I encountered a scenario where I want an image to have a border when clicked, and if clicked again, the border should be removed. However, the border should also be removed if another image is clicked instead. I believe there are a couple of approaches to ...

Issues with AJAX requests failing to fire with the latest version of jQuery

A small script I have checks the availability of a username in the database, displaying "taken" if it's already taken and "available" if it's not. The code below works perfectly with jQuery v1.7.2. However, I need to update it for jQuery v3.2.1. ...

Unchecking random checkboxes within a div using jQuery after checking them all

Once a link is clicked on, all checkboxes within that particular div will be checked. function initSelectAll() { $("form").find("a.selectAll").click(function() { var cb = $(this).closest("div").find("input[type=checkbox]"); cb.not(":checked" ...

Exploring First-Person Shooter Rotation with THREE.JS

I recently attempted to create a rotation system for a First Person Shooter game using THREE.JS. However, I encountered a strange issue where the camera would pause momentarily before returning, especially at certain rotations. When checking the rotation ...

Limiting the functionality of API's to be exclusively accessible within the confines of a web browser

Currently, I am working with node js and have implemented policies to restrict API access from sources other than the browser. In order to achieve this, I have included the following condition in my code: app.route('/students').all(policy.checkH ...

Is it possible to retrieve data from Local Storage using user_id and SessionId, and if so, how can it be done?

I have some data in an interactive menu created with iSpring, which includes a feature for local storage to save the last viewed page. I also have a system for logging and need to associate this local storage with user_id or sessionid. I found some informa ...

Exploring the world of data manipulation in AngularJS

Seeking to comprehend the rationale behind it, I will share some general code snippets: 1) Fetching data from a JSON file using the "loadData" service: return { myData: function(){ return $http.get(path + "data.json"); } } 2) ...

JavaScript issue with confirm/redirect feature not functioning as expected

A demonstration of JavaScript is utilized for deleting an employee in this scenario... <script type="text/javascript"> function deleteEmployee(employee) { var confirmation = confirm('Are you sure?'); if(confirmation) { ...

I am encountering difficulties displaying the image and CSS files from another folder in my HTML with Node.js

I am facing difficulty in establishing a connection between my front-end and back-end using node.js. As a result, the website only displays the HTML code without linking to the CSS or image files. Here is the folder structure: root -src •pi ...

Leveraging Arrays with AJAX Promises

I am currently working on making multiple AJAX calls using promises. I want to combine the two responses, analyze them collectively, and then generate a final response. Here is my current approach: var responseData = []; for (var i=0; i<letsSayTwo; i++ ...

What is the method for toggling a checkbox on and off repeatedly?

I've been struggling with this piece of code. I've attempted using setTimeout, promises, and callback functions, but nothing seems to work as expected. document.querySelectorAll("input").forEach((el, i) => { setTimeout(() => { ...

Discovering Unconventional Columns Through Sharepoint REST Api Filtration

I am working on recreating SharePoint's front end in my app and want to add columns to my table just like a user would in SP. The challenge I am facing is determining which columns were custom generated by the user rather than standard ones. Although ...

Arranging a list of objects with a designated starting value to remain at the forefront

Consider the array and variable shown below: array = ['complete','in_progress','planned']; value = 'planned'; The goal is to always sort the array starting with the 'value' variable, resulting in: array ...

JS-generated elements do not automatically wrap to the next line

For my first project, I've been working on a to-do list and encountered an issue. When I create a new div with user input, I expect it to start on a new line but it remains stuck on the same line. Can anyone point out where I might have gone wrong? I ...