Exploring the world of JavaScript by dynamically retrieving all class functions

Question

Exploring the world of JavaScript by dynamically retrieving all class functions

Is there a way to retrieve an array of all functions from a given class, including functions inherited from parent classes?

For instance:

class Foo extends Bar {
      funcA() {}
}

class Bar {
      funcB() {}
}

const instanceFoo = new Foo();

getClassFunctions(instanceFoo); // should return an array ['funcA', 'funcB'];

I've created a function that fetches the names of a class's functions, but it only works for properties belonging directly to the class.

const getAllFuncs = (obj) => {
    const proto = Object.getPrototypeOf(obj);
    const names = Object.getOwnPropertyNames(proto);
    return names.filter(name => typeof obj[name] === 'function' && name !== 'constructor');
}

javascript

Answer 1

Answer №1

To retrieve all functions from an object, you can loop through its prototypes, beginning with the object itself and not its prototype. The loop can stop when it reaches Object.prototype. During construction, methods may be added, hence starting with the object is important:

const getAllFuncs = (obj) => {
    // Keep track of checked names
    const checked = new Set();
    // Store function names to return
    const funcs = [];
    while (obj && obj !== Object.prototype) {
        for (const name of Object.getOwnPropertyNames(obj)) {
            if (name !== "constructor" && !checked.has(name)) {
                // Mark as checked
                checked.add(name);
                const value = obj[name];
                if (typeof value === "function") {
                    // Add to list of functions
                    funcs.push(name);
                }
            }
        }
        // Move up a level
        obj = Object.getPrototypeOf(obj);
    }
    return funcs;
};

The distinction between checked and funcs is necessary because an object might have a property named foo containing a non-function type, while its prototype could have a foo with a function. Although uncommon, this scenario is possible:

class Base {
    foo() {
    }
}
class Sub extends Base {
    constructor() {
        super();
        this.foo = 42;
    }
}

const sub = new Sub();
const names = getAllFuncs(sub);

In this case, names would exclude foo since sub.foo is assigned with 42, not a function.

Answer 2

To retrieve all functions from an object, you can loop through its prototypes, beginning with the object itself and not its prototype. The loop can stop when it reaches Object.prototype. During construction, methods may be added, hence starting with the object is important:

const getAllFuncs = (obj) => {
    // Keep track of checked names
    const checked = new Set();
    // Store function names to return
    const funcs = [];
    while (obj && obj !== Object.prototype) {
        for (const name of Object.getOwnPropertyNames(obj)) {
            if (name !== "constructor" && !checked.has(name)) {
                // Mark as checked
                checked.add(name);
                const value = obj[name];
                if (typeof value === "function") {
                    // Add to list of functions
                    funcs.push(name);
                }
            }
        }
        // Move up a level
        obj = Object.getPrototypeOf(obj);
    }
    return funcs;
};

The distinction between checked and funcs is necessary because an object might have a property named foo containing a non-function type, while its prototype could have a foo with a function. Although uncommon, this scenario is possible:

class Base {
    foo() {
    }
}
class Sub extends Base {
    constructor() {
        super();
        this.foo = 42;
    }
}

const sub = new Sub();
const names = getAllFuncs(sub);

In this case, names would exclude foo since sub.foo is assigned with 42, not a function.

Exploring the world of JavaScript by dynamically retrieving all class functions

Answer №1

Similar questions

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Having trouble getting card animations to slide down using React Spring

Combine two sets of JavaScript objects based on their positions using Underscore.js

What is the best way to access a private class variable within the sockent.on function in Angular?

Do I have to include reject() in the executor when using promises in express.js?

Utilize Android accelerometer data to bring objects to life with animation

Disappearance of array data

Firebase onSnapshot error when retrieving data from Snapchot

The React apexchart heatmap's height remains static despite attempting to change it through state updates

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

What is the best way to target a specific item in a list using JavaScript in order to modify its appearance?

Struggling to save a signature created with an HTML5 Canvas to the database

Guide on how to selectively add middleware such as multer to a fresh express router

Using NPM packages with vanilla JavaScript can be achieved without the need for an HTML file

Real estate listing featuring unique symbols

How can non-numeric characters be eliminated while allowing points, commas, and the dollar sign?

Determining the victorious player in a game of Blackjack

Having trouble with Vue's $route.push method not working when invoked from a method?

Using Props with jQuery in React Components: A Comprehensive Guide

Struggling with implementing jQuery AJAX in Node.js Express - any tips?