Obtain an object or function name using JavaScript

Question

Obtain an object or function name using JavaScript

In the process of developing a JavaScript app, I am utilizing a third-party library which defines an object in the following structure:

getLibrary().SomeObject = function() {
  function SomeObject(attrs) {
    this.id = attrs.id;
    this.description = attrs.description || '';

    this.result = {
      id: this.id,
      description: this.description,
    };
  }

  SomeObject.prototype.doSomething = function(actual) {
    return 'do something';
  };

  SomeObject.prototype.calculate = function() {
    return 42;
  };

  return SomeObject;
};

I have created an instance of this object stored in a variable named myInstance. When reviewing the Chrome console output using console.log(myInstance), the displayed content is as follows:

v SomeObject
  id: '1'
  description: 'my description'
  > result: Object

My objective is to extract the "SomeObject" part from the output above. Attempting to use the instanceof check with SomeObject did not yield the desired outcome. Essentially, I am seeking a way to retrieve the name of the "type" or function associated with myInstance.

Any assistance on how to achieve this would be greatly appreciated.

javascript

Answer 1

Answer №1

getLibrary().SomeObject is not just a regular constructor function, it's actually a function that returns a constructor function. So in order to use it correctly, you would need to do something like the following:

var SomeObject = getLibrary().SomeObject();
// Remember to add the parentheses at the end ^^^

This way, you are calling the function to obtain the constructor function it returns.

Once you have the constructor function, you can create an instance using it:

var myInstance = new SomeObject({id:"some_id"});

By doing this, the instanceof operator will work as expected:

console.log(myInstance instanceof SomeObject); // true

Live Example:

var library = {};
function getLibrary() {
    return library;
}
getLibrary().SomeObject = function() {
  function SomeObject(attrs) {
    this.id = attrs.id;
    this.description = attrs.description || '';

    this.result = {
      id: this.id,
      description: this.description,
    };
  }

  SomeObject.prototype.doSomething = function(actual) {
    return 'do something';
  };

  SomeObject.prototype.calculate = function() {
    return 42;
  };

  return SomeObject;
};
var SomeObject = getLibrary().SomeObject();
var myInstance = new SomeObject({id: "myid"});
document.body.innerHTML = myInstance instanceof SomeObject;

If you ever want to find out which function most likely created myInstance, assuming nothing has modified the

SomeObject.prototype</code), you can access it through <code>myInstance.constructor

. In ES2015 and later versions, you can also retrieve the name of that function using its name property. Most modern browsers support this feature, even though it was only recently standardized. Therefore, on compliant browsers, you can easily get the function name like this:

console.log(myInstance.constructor.name); // "SomeObject"

Answer 2

getLibrary().SomeObject is not just a regular constructor function, it's actually a function that returns a constructor function. So in order to use it correctly, you would need to do something like the following:

var SomeObject = getLibrary().SomeObject();
// Remember to add the parentheses at the end ^^^

This way, you are calling the function to obtain the constructor function it returns.

Once you have the constructor function, you can create an instance using it:

var myInstance = new SomeObject({id:"some_id"});

By doing this, the instanceof operator will work as expected:

console.log(myInstance instanceof SomeObject); // true

Live Example:

var library = {};
function getLibrary() {
    return library;
}
getLibrary().SomeObject = function() {
  function SomeObject(attrs) {
    this.id = attrs.id;
    this.description = attrs.description || '';

    this.result = {
      id: this.id,
      description: this.description,
    };
  }

  SomeObject.prototype.doSomething = function(actual) {
    return 'do something';
  };

  SomeObject.prototype.calculate = function() {
    return 42;
  };

  return SomeObject;
};
var SomeObject = getLibrary().SomeObject();
var myInstance = new SomeObject({id: "myid"});
document.body.innerHTML = myInstance instanceof SomeObject;

If you ever want to find out which function most likely created myInstance, assuming nothing has modified the

SomeObject.prototype</code), you can access it through <code>myInstance.constructor

. In ES2015 and later versions, you can also retrieve the name of that function using its name property. Most modern browsers support this feature, even though it was only recently standardized. Therefore, on compliant browsers, you can easily get the function name like this:

console.log(myInstance.constructor.name); // "SomeObject"

Obtain an object or function name using JavaScript

Answer №1

Similar questions

Executing a post request using axios

Using preventDefault on an anchor tag with the tel: protocol is ineffective

Guide on exporting data from ejs files to a pdf file using pdfkit in a node js environment

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

Using a JSON file as a database for a project featuring HTML, CSS, and Vanilla JavaScript

Trouble with JavaScript preventing the opening of a new webpage

Utilizing an Angular Service within a method, embedded in a class, nested inside a module

How to optimize the utilization of Javascript variables within a Jquery function?

Navigating through information using Axios in React JS

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Implementing an onclick function to initiate a MySQL update query

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

JavaScript syntax issue detected, semicolon missing

Using jsdom as a package in a Meteor application is not possible

Is there a way to prevent the React history.push from reloading the component every time? I only want

Using JQuery to create interactive dropdown menus with dynamic options

The art of positioning images and creatively cropping

How can I position text below a ticked checkbox?

Node.js HTTP request not returning any content in the body/message

Navigating through Next.Js using client side redirects