Class methods that are never called and everything handled by the internals of the class itself

Question

I have a class in my code and I'm not sure if the design I've implemented is correct or if there is a better way to do it. The class I have created have important useful methods that is used by each instance of that class. However, the problem is that the instance itself is never used. The class handles everything that needs to be done without using the object itself. So, once I call the constructor, I never use the object again. The internals of the class handle everything. Here's an example of what I mean. It's written in JS but can apply to pretty much any lang.

class MyHTMLElement {
    constructor(htmlElement) {
        this.htmlElement = htmlElement;
        this.changeColorOnClick();
        this.changeBorderOnInput();
    }
    changeColorOnClick() {
        this.htmlElement.onclick = () => {
            this.htmlElement.style.color = "blue";
        }
    }
    changeBorderOnInput {
        this.htmlElement.addEventListener("input", () => {
            this.htmlElement.style.border = "2px solid green";
    }
}

Now once I've created this, all I need to do is call new MyHTMLElement("element"); for each instance I need and then never use the functionalities of the class ever again. I will still use the instance htmlElement attribute, but will never use any of the methods. This seems like it's bad deign to me. Is there a better way to do this that is also very clean. Thanks for your help.

Answer 1

What you're looking for is a function, not an object. Instead of new MyHTMLElement("element") you could just say modifyHtmlElement("element") which should also work:

function modifyHtmlElement(htmlElement) {
    changeColorOnClick();
    changeBorderOnInput();

    function changeColorOnClick() {
        htmlElement.onclick = () => {
            this.htmlElement.style.color = "blue";
        }
    }

    function changeBorderOnInput {
        htmlElement.addEventListener("input", () => {
            this.htmlElement.style.border = "2px solid green";
        }
    }
}

These constructor-only classes are usually an antipattern, as they can be replaced by much simpler functions. In JavaScript there is an interesting relationship between functions and constructors and classes anyway, but that is specific to the language.

The exception where you really might want to call a constructor and then not use the object would be if the new object registers itself somewhere, or if it starts doing something in the background. E.g. a class representing a Thread might be implemented like this.

Answer 2

In this case the whole existence of your class is pointless. You do not add any value to the injected htmlElement that already provides all you need. Just subscribe to the handlers directly instead rather than relaying that to the constructor of an empty class. This is more flexible too. All your class does now is limit the use of the htmlElement.

Answer 3

The problem with this approach is that you are going to need lots of versions of myHTMLElement for all the types of behaviour you want.

In order to reuse code you will want to use inheritance to implement this variety of functionality. You literally have no where else to put the code.

So far So OOP. But in a large project you will end up with an unmanageable inheritance tree where changing a small thing on an object high up in the hierarchy can have unintendended consequencies