0

Is there a way to cleanup things within a class before it's destroyed by the garbage collector like the del method in Python classes? This is mainly for DOM objects that have been created within the class? I think when the class is destroyed, the pointer to that DOM object will be destroyed, too, but the DOM element itself will stay in existance. As an example:

class Test {
    private div: HTMLDivElement;
    constructor() {
        this.div = document.createElement("div");
        document.body.appendChild(this.div);
    }
    
    __del__() {
        this.div.parentNode.removeChild(this.div);
    }
}

I think if I do the above methode I still need to explicitly run the del methode before destroying the instance, which can be annoying. I could not find any info about methods that are automatically run on destruction. What is the best approach here?

mke21
  • 145
  • 10
  • 2
    Does this answer your question? [ECMAScript 6 class destructor](https://stackoverflow.com/questions/29333017/ecmascript-6-class-destructor) – Tobias S. Aug 02 '22 at 08:23
  • 2
    There aren't any methods that are automatically run when an element is deleted in the way you're thinking of it. You can use `Event`s for this, or a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), but neither of these are really what you're after. There's also `WeakMap`, but again, not really what you want. I realise this comment doesn't answer your question, but that's because what you want doesn't exist. These are some other topics for research though, as they can provide an automatic *cleanup* mechanism, when implemented correctly. – Jack_Hu Aug 02 '22 at 08:27
  • 2
    Also, many frontend frameworks (`VueJS`, `React`, `Angular`, etc.), will also provide some form of this functionality (and a whole lot more) built in, which is achieved by implementing a combination of the three research topics I mentioned in my previous comment. :) – Jack_Hu Aug 02 '22 at 08:29
  • @Jack_Hu actually that does answer my question. So there is indeed no standard way to destruct the object safely in my case. I'll have to find another solution or other construction. – mke21 Aug 02 '22 at 08:36
  • 1
    Classes in JavaScript are just syntactical sugar to make creating objects more *traditional*, behind the scenes, the JS engine is still using function instantiation, and the prototype chain. Like `var myClass = function(constructorVar) { this.variable = constructorVar; this.fn = function() { console.log(this.variable) }; };`, etc. Then `var myClass = new myClass('Hello World!');` to instantiate the object. As such, classes are just like any other function in JavaScript, and as there's no hooks that are run by the interpreter when the `delete` keyword is used, then there's no notice given. – Jack_Hu Aug 02 '22 at 08:48
  • @mke21 - However, using a combination of `Events` and a `MutationObserver`, you can get exactly what you want, but depending on your application, it's probably overkill, as it'll add a lot of complexity to your boilerplate code, and you'd probably be better of just chucking Vue on it, and using the `destroyed()`/`unmounted()` hook it provides. – Jack_Hu Aug 02 '22 at 08:51

0 Answers0