Creating a custom class implementation in JavaScript and initializing it with a constructor function

Perhaps there is a similar question out there, but I haven't come across it yet and I'm still facing an issue. Here's what I've tried:

function createClass(obj) {
    const constructor = obj.constructor;
    constructor.prototype = obj;
    return constructor;
}

Then I attempted to use it like this:

const Person = createClass({
    constructor: function (name) {
        this.name = name;
    },
    voice() {
        console.log(`Hello, I'm ${this.name}`);
    } 
})

This works fine. However, if I want to utilize a constructor in this manner:

const Person = createClass({
    constructor(name) {
        this.name = name;
    },
    voice() {
        console.log(`Hello, I'm ${this.name}`);
    } 
})

I believe this is more akin to the native implementation. But when I try this, I receive an error stating 'Person is not a constructor'. What exactly is the distinction between these two approaches? Apologies for such a basic inquiry, I'm just trying to understand this core concept better. Appreciate any assistance.

Answer №1

Procedures - which means:

someMethodName() {
}

should not be used as constructors - this will result in the error you are experiencing. Instead, transform the method into a function:

function defineClass(obj) {
  const constructor = obj.constructor;
  constructor.prototype = obj;
  return constructor;
}

const Person = defineClass({
  constructor: function(name) {
    this.name = name;
  },
  voice() {
    console.log(`Hello, I'm ${this.name}`);
  }
})

const p = new Person('foo');
p.voice();

Alternatively, do not use new when invoking it:

function defineClass(obj) {
  const constructor = obj.constructor;
  constructor.prototype = obj;
  
  return function(...args) {
    const instance = Object.create(obj);
    constructor.apply(instance, args);
    return instance;
  };
}

const Person = defineClass({
  constructor(name) {
    this.name = name;
    return this;
  },
  voice() {
    console.log(`Hello, I'm ${this.name}`);
  }
})

const p = Person('foo');
p.voice();

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

Importing information from the Document Object Model in Vue.js, focusing on the action attribute of a form

Can Vue be used to create a binding where the data item in the Vue instance is initialized from the DOM? In my specific case, I want my Vue instance to receive the action attribute of a form element. For example, this is how my HTML would look like (the ...

Can you explain the exact meaning of XMLHttpRequest.XMLHttpRequest?

I find MDN's writing style to be confusing. On the MDN page about XMLHttpRequest, it states: XMLHttpRequest is an API ... Constructor XMLHttpRequest.XMLHttpRequest Properties XMLHttpRequest.onreadystatechange XMLHttpRequest.readyState XMLHttpReq ...

Steps to turn off fancybox for mobile and show the full image instead

In this scenario... I am seeking a way to deactivate fancybox functionality on mobile devices. I have already discovered one method to disable it... And now I want to directly show the large image in the a href="xxx_large.jpg" instead of using the img src= ...

Interacting between my React Native client and server.js

Currently, I am developing a project that utilizes react native, express, and MongoDB. My challenge lies in establishing communication between the react-native-js file and the node-js file. Specifically, when the submit button is clicked, I aim to pass a ...

Struggling with parameter passing issues and preparing code for seamless integration with MYSQL database

I've been dedicating the past four days to a project that I've crafted entirely by hand to test my JavaScript skills as I progress through Codecademy courses. The goal is to develop a browser-based checklist program, and so far, I've success ...

Switch out the view div element with ui-router

Currently, I am utilizing Angular ui-router to manage various views in the following manner: <div ui-view="header"></div> <div ui-view="nav"></div> <div ui-view></div> Upon Angular loading, the divs are automatically p ...

FireFox is causing issues with both ng-view and Angular functions, rendering them unusable

My AngularJS sample application is running smoothly in Google Chrome, but when I tried to test it in Firefox, I encountered issues with ng-view and other functions not working properly. This is the structure of my application: Index.html <!DOCTYPE ht ...

I often find that jscodeshift consistently avoids processing my JavaScript files

I am currently in the process of updating my react application to the newest version of Material-UI. I came across a migration helper script using jscodeshift within the material UI project. (https://github.com/mui-org/material-ui/tree/master/packages/mate ...

Stop MatDialog from closing automatically when clicked outside while there are unsaved changes

Is there a way to prevent closing when there are pending changes without success? this.dialogRef.beforeClosed().subscribe(() => { this.dialogRef.close(false); //some code logic //... }); The setting disableClose on MatDialog must remain as false ...

Accessing Row Data from a Material Table using a Button Click, Not through Row Selection

My React component features a material table view, shown here: https://i.stack.imgur.com/OUVOD.png Whenever the delete icon is clicked in the table, I want to access the rowdata associated with that particular row. However, all I am able to retrieve is ...

What is the process for changing and updating the key of an object based on comparisons with other objects?

My task involves working with an array of objects that contain unique IDs as keys. const sampleObj1 = {0011:[{},{}], 0022:[{}, {}], 0033:[{},{}]} const sampleObj2 = [{id:0011, name:'test1'}, {id:0022, name:'test2'}, {id:0033, name:&apos ...

Utilizing CSS for styling a class with a dynamic name

On the server side, I am dynamically generating class names like this: <p class="level_1">List item 1</p> <p class="level_2">List item 2</p> <p class="level_3">List item 3</p> <p class="level_1">List item 1</p& ...

What is the best way to explain the concept of type indexing in TypeScript using its own keys?

I'm still learning TypeScript, so please bear with me if my question sounds basic. Is there a way to specify the index for this type so that it utilizes its own keys rather than just being an object? export type TypeAbCreationModal = { [index: stri ...

Tips for storing unique values in an object using JavaScript

I need assistance with organizing my log data, which includes camera names and system IP addresses. I am trying to create an object where each unique system IP is a key, with an array of corresponding camera names as the value. Here is the code snippet I h ...

jQuery Validation is not functioning correctly

I am facing an issue with implementing jQuery.Validation. I have written a script and included all JS files below, but for some unknown reason, the validation always returns that the form is valid. Below is the JavaScript code I am using: $(document).rea ...

Tips for adding your artistic touch to photos

I'm currently facing a challenge in creating a chart that overlaps an image. The bars and text on the chart are displaying perfectly when I remove the background image. However, I'm struggling to get the bars and text to appear on top of the imag ...

What are the essential files needed in Kendo UI Core for a mobile app?

Several months ago, I created a trial Kendo mobile app but now I want to verify it using the most recent version of Kendo UI Core. In my previous project, I referenced the following files: <link href="../styles/kendo.common.min.css" rel="stylesheet" / ...

Tips for retrieving information from a highstock chart

Imagine I have a sample highstock chart on my website, similar to the one at this link. Is there a way to extract the data from the chart itself, even if the data used for creating the chart is not accessible to others? <img src="http://www.highchart ...

Searching for data in a bootstrap table that is not case-sensitive

Searching for and highlighting text within a bootstrap table has proven to be a challenge. Check out the Fiddle for an example: https://jsfiddle.net/99x50s2s/74/ HTML <table class='table table-bordered'> <thead> <tr& ...

Issue with FontAwesome icon selection in Vue2 (nuxt) not displaying icons

If you're looking for the icon picker, you can find it here: https://github.com/laistomazz/font-awesome-picker I've tried running it, but unfortunately, the icons are not showing up. When I inspect the elements, the code is there but the icon is ...