Retrieve the function reference of a class (not an instance)

Question

Retrieve the function reference of a class (not an instance)

I am working on a code that involves using a function to alter existing functions and return a reference to a new function. I aim to apply this function to specific methods within a class. The current state of my code is as follows:

function modifyMethod(func) {
  return function() {
    console.log('working');
    return func.apply(this, arguments);
  };
}

function modifyClassMethods(ClassName, methodArray) {
  // Implementation pending 

  return ClassName;
}

class Temp {
  hi() {
    console.log("hi method");
  }
}

Temp = modifyClassMethods(Temp, ["hi"]);
const temp = new Temp();
// The expected output is
//
// working
// hi method
temp.hi();

When attempting to invoke the modifyMethod with Temp.hi, the func parameter appears to be undefined. Even if an object is created and then the method is modified, the changes will only affect that particular object's method, not all objects within the same class.

It should be noted that this example serves as just a demonstration. My goal is to extend this modification to the methods of various classes. Therefore, it is not possible to generalize method names either. Any suggestions or code snippets for the modifyClassMethods would be highly appreciated.

javascript object

Answer 1

Answer №1

When defining methods with method syntax within a class, it's important to note that those not marked as static are considered prototype methods. Therefore, they belong to Temp.prototype rather than directly to Temp. This means that any updates should be made on Temp.prototype:

Temp.prototype.hi = modifyMethod(Temp.prototype.hi);

Static methods, on the other hand, are the only ones that reside on Temp itself.

In some cases, you may encounter functions created within the class body using the syntax of the class fields proposal:

class Temp {
    hi = () => {
        //
    };
}

These are known as instance methods. They are generated by the constructor and duplicated for each instance, as if they were constructed in this manner:

class Temp {
    constructor() {
        this.hi = () => {
            //
        };
    }
}

Wrapping these methods is only possible after an instance has been created since they are specific to each instance.

In summary, let's consider the following example:

class Temp {
    static staticMethod() {
        // ...
    }
    prototypeMethod() {
        // ...
    }
    instanceMethod = () => {
        // ...
    };
    constructor() {
        this.anotherInstanceMethod = () => {
            // ...
        };
        this.yetAnotherInstanceMethod = function {
            // ...
        };
    }
}

This class showcases three types of methods:

Static Methods, like staticMethod, accessible through Temp (e.g., Temp.staticMethod);
Prototype Methods, such as prototypeMethod, located on Temp.prototype (e.g., Temp.prototype.prototypeMethod); and
Instance Methods, including instanceMethod, anotherInstanceMethod, and yetAnotherInstanceMethod, present on instances themselves when created.

¹ In reality, these methods are generated using Object.defineProperty as demonstrated below:

class Temp {
    constructor() {
        Object.defineProperty(this, "hi", {
            value: () => {
                //
            },
            writable: true,
            configurable: true,
            enumerable: true
        });
    }
}

To maintain simplicity, I used basic assignment in the examples provided earlier. :-)

Answer 2

When defining methods with method syntax within a class, it's important to note that those not marked as static are considered prototype methods. Therefore, they belong to Temp.prototype rather than directly to Temp. This means that any updates should be made on Temp.prototype:

Temp.prototype.hi = modifyMethod(Temp.prototype.hi);

Static methods, on the other hand, are the only ones that reside on Temp itself.

In some cases, you may encounter functions created within the class body using the syntax of the class fields proposal:

class Temp {
    hi = () => {
        //
    };
}

These are known as instance methods. They are generated by the constructor and duplicated for each instance, as if they were constructed in this manner:

class Temp {
    constructor() {
        this.hi = () => {
            //
        };
    }
}

Wrapping these methods is only possible after an instance has been created since they are specific to each instance.

In summary, let's consider the following example:

class Temp {
    static staticMethod() {
        // ...
    }
    prototypeMethod() {
        // ...
    }
    instanceMethod = () => {
        // ...
    };
    constructor() {
        this.anotherInstanceMethod = () => {
            // ...
        };
        this.yetAnotherInstanceMethod = function {
            // ...
        };
    }
}

This class showcases three types of methods:

Static Methods, like staticMethod, accessible through Temp (e.g., Temp.staticMethod);
Prototype Methods, such as prototypeMethod, located on Temp.prototype (e.g., Temp.prototype.prototypeMethod); and
Instance Methods, including instanceMethod, anotherInstanceMethod, and yetAnotherInstanceMethod, present on instances themselves when created.

¹ In reality, these methods are generated using Object.defineProperty as demonstrated below:

class Temp {
    constructor() {
        Object.defineProperty(this, "hi", {
            value: () => {
                //
            },
            writable: true,
            configurable: true,
            enumerable: true
        });
    }
}

To maintain simplicity, I used basic assignment in the examples provided earlier. :-)

Retrieve the function reference of a class (not an instance)

Answer №1

Similar questions

Guidelines for utilizing regex to match this specific string

What is the process for creating a server-side API call?

Learn how to insert a <TableRow> in a for loop using Object.keys

Issue with slideshow counter persisting across multiple arrays

Prevent ng-click functionality for markers and infowindows on an Angular map

Enforce uniqueness on two fields with a MongoDB composite unique constraint

Ways to prevent the execution of JavaScript code?

Is it not possible to access a private member from an object that was not declared in its class...?

Step-by-step guide on transferring an HTML5 sqlite result set to a server using AJAX

Attempting to use vue-test-utils-getting-started with the standard configuration results in a "Preset Not Found" error during

SquirrelFish appears to be lacking "bind()", so how can one attach a JS callback to "this" in its absence?

What impact does rotation have on an orthographic camera within the Three.js framework?

Dynamically alter routing in Express by retrieving route paths from a JSON document

Connecting MySQL to HTML: Step-by-step guide

Determining the height of dynamically rendered child elements in a React application

Validating Cognito credentials on the server-side using Node.js

Express.js returning unexpected results when calling MySQL stored procedures

Do <script> tags in javascript provide an efficient way to parse Handlebars data?

Loading JSON data into HTML elements using jQuery

Tips for converting a "callback pyramid" into a promise-based structure