Can one assign a single constructor to multiple classes without losing access to their respective defined fields?

One thing that really bothers me in programming languages is when the arguments passed in a constructor are directly assigned to fields in a class with matching names, like this:

class A {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        etc...
    }
}

To avoid this, I discovered a workaround where I could create a function that dynamically took the existing keys in a class and their corresponding arguments:

function test(values) {
      Object.keys(this).map((x,i) => this[x] = values[i]);
}

class ChildObj {
      a1;
      a2;
      constructor() {
          test.call(this, arguments);
      }
}

While this method works well, I wanted to further streamline it by eliminating the repetitive constructor declaration. Since I have many classes set up in a similar manner, this repetition was becoming cumbersome.

I initially considered using inheritance, but the fields belong to the child object and are not visible to the parent. Next, I attempted to modify the class's constructor dynamically based on an array of relevant classes, but altering a class's constructor directly proved to be challenging:

A.constructor = function() {
    test.call(this, arguments);
}

A.prototype.constructor = function() {
    test.call(this, arguments);
}

As a temporary solution, I tried defining my object as a function, yet encountered issues accessing the function parameters' names without resorting to Regex for parsing source code, which I preferred to avoid.

-----PS:-------

After some experimentation, I managed to pass the child keys to the parent by having the parent construct a clone of the child while halting recursion there:

class ParentObj {
    constructor() {
        if(ParentObj.constructor.in) {
            return;
        }
        ParentObj.constructor.in = true;
        let keys = Object.keys(new this.constructor);
        ParentObj.constructor.in = false;
        Object.keys(this).map((x,i) => this[x] = arguments[i]);
   }
}


class ChildObj extends ParentObj {
    a1
    a2
}

console.log(new ChildObj(3, 2));

However, despite this progress, it seems something has still gone awry as the values are not being properly assigned to the resulting object.

-----END PS ---------

In conclusion, I am curious if it is feasible in Javascript to dynamically assign a constructor like this, and if not, what alternative methods exist for creating objects with simple constructors? Thank you.

Answer №1

Unfortunately, it is not feasible to achieve this.

The presence of those class fields results in properties being generated within the constructor of the class, whether implicitly or explicitly declared. Consequently, the parent constructor will never have access to them, as you have rightly deduced. One potential solution could involve employing a decorator on the entire class, though doing so may not be straightforward for ES6 class structures, as elaborated here.

An alternative approach would entail abandoning the use of class syntax and opting to dynamically create your classes instead:

function makeClass(properties) {
    return function Class(...args) {
        for (const [i, p] of properties.entries())
            this[p] = args[i];
    };
}

const A = makeClass(["a1", "a2"]);

Answer №2

I've managed to develop a solution that more or less does the job, although it involves changing how the constructor is called, which is not ideal:

  class ChildObj2{
      a1
      a2
  }

  function ObjConstructor(obj,...args){
      let o = new obj
      Object.keys(o).map((x,i) => o[x] = args[i])
      return o
  }

  console.log(ObjConstructor(ChildObj2,3,2))

Answer №3

Thinking back, it's important to note that in JavaScript, classes are essentially just a more concise way of defining functions which greatly streamlines the coding process.

To make things even simpler, why not create a classGenerator function that generates a constructor for your defined class, making it effortless to generate new instances with just a single line of code.

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

What is the best way to combine two arrays using Mongoose?

Group 1 = [X, , , , ,X] Group 2 = [ , , ,O, , ] I am looking for a way to combine group 1 with group 2 in order to achieve the following arrangement: [X, , , O, ,X] without simply replacing Group 1 with Group 2.. Here is the code snippet I have so far: ...

Exploring the numerical values within a JavaScript array for comparison purposes

I am currently working with an array as shown below var nums = ["1", "2", "2", "3", "4", "4", "5"]; My goal is to compare the values in the array and determine whether they are in ascending order or not. In case two values in the array are identical, I ...

What is the best way to prevent past dates from being selected on a calendar using PHP?

$('#eventDate-container .input-group.date').datepicker({ weekStart: 1, // Monday is the start day autoclose: true, todayHighlight: true, startDate: "4/10/2017", // Disable all dates before this date datesDisabled: ...

JS: Best way to transfer selected information to the following page?

Within our SharePoint list, users often need to add very similar items. To streamline this process, I am exploring the possibility of adding a new column that includes a button or turning one of the existing columns into a clickable link. When clicked: ...

Dynamic Code for Removing List Items Based on Date

I need assistance in resolving an issue with my company's website design and function. Specifically, I am working on a page that displays a list of events where employees will be present throughout the year. Here is an example: <div class="contai ...

Tips for creating a blur effect on all options except for the selected 2 out of 4 using jQuery

My goal is to choose 3 options from a list and once 3 options are selected, all other options will be blurred to prevent further selection. Please review the code snippet I have provided below. Link to File <!DOCTYPE html> <html> <head> ...

Ways to identify an element within a webpage

I'm currently working on creating a chrome extension that can detect the presence of specific elements on a webpage. The goal is to have this extension automatically run every time a new page is opened and display a popup message if the element is fou ...

How can we eliminate all elements from jQuery except for the first and second elements?

HTML <div class="geo_select"> <h3>header 3</h3> in Above HTML code i want to remove all element except <h3> and default content<div> inside the <div class='geo_select'> in jquery.. How to remove all ...

I am struggling to retrieve a value from the angular.forEach function, the flag value is not being obtained. What could be

I'm having an issue with my controller.js file. I can't seem to access the value from the angular.forEach function, specifically the flagvalue isn't being retrieved. Is it because the scope of flagvalue ends when the forEach function complet ...

Using both Typescript and Javascript, half of the Angular2 application is built

My current project is a large JavaScript application with the majority of code written in vanilla JavaScript for a specific platform at my workplace. I am looking to convert this into a web application that can be accessed through a browser. I believe thi ...

Utilizing JQuery's .html() method in conjunction with external scripts

Currently, as part of my loading process, I am utilizing the jQuery ajax() method to bring in an external page that contains both HTML and JavaScript code: <script type="text/javascript" src="myfile.js"></script> <p>This is some HTML< ...

Is there a way to iterate within a loop and organize data from a JSON object using an AJAX request?

I am in the process of developing a dynamic carousel that utilizes data from a JSON object structured as follows: [{ "category": { "href": "somecategory/categoryid", "id": "somecategory/categ ...

What is the best way to determine if a URL parameter is present when compared to an Array?

Given the following two example URLs and code snippets, how can I utilize an Array as a reference to verify if the values are present in the UTM parameter? (Note: There will only be one UTM parameter at a time). example.com?utm=test example.com?utm=test ...

Is it possible to modify the color of a division row using an onchange event in JQuery?

I am facing a requirement to dynamically change the color of rows based on the dropdown onchange value. The rows are structured in divisions, which were previously tables. There are two main divisions with rows that need to be updated based on dropdown sel ...

Employing conditional statements to adjust the size of an image or background identifier in JavaScript

As I dive into the world of Javascript, I find myself faced with the challenge of modifying existing code using if / else statements. The original code snippet in question is as follows: document.getElementById("button1").addEventListener("click", functio ...

Updating parts of a list using AJAX

Recently, I've encountered a challenge where I need to enable editing functionality on a table column from a database. The goal is to make the column editable when clicked and update the value when clicked out. To achieve this, I decided to utilize A ...

What are your thoughts on this method? Verifying the existence of a variable or setting it to

const pictureEntity = updateUserDto?.picture ? await this.filesService.find(updateUserDto.picture) : null; if (pictureEntity) { const url = await this.filesService.getFileUrl(pictureEntity); } Is the method used to assign the value to pictureEn ...

Is there a way to display tooltip information for exactly 4 seconds when the page loads, hide it, and then have it reappear when hovered over

I am currently working with react-bootstrap version 0.32.4 and due to various changes, I am unable to update the version. My goal is to display a tooltip for 4 seconds upon page load and then hide it, only to show the tooltip again on hover. Here's ...

Close the overlay by clicking outside of it

I'm working on creating a unique pop-up window that appears when a customer adds a product to their cart. The design features red and green background divs with a darker overlay (#overlay-daddy) and a white child div (#overlay). My issue arises from ...

Are there any limitations imposed on keydown events in JavaScript when attempting to modify the browser's

I attempted to implement a JavaScript keydown event that would refresh the page, but unfortunately, it did not function as intended. Interestingly, the same code works flawlessly when triggered by a button click event. I'm in search of a solution to r ...