Javascript:删除原型(prototype)继承中对 HTML 选择器的引用？

Question

我正忙于学习使用对象的原型(prototype)继承。我的代码目前可以正常工作。但我现在想做的是避免造成内存泄漏。

我有一堆在父对象中调用的 HTML 选择器。这些稍后用于删除和添加一些 CSS 动画。

我现在想做的是基本上删除或使父构造函数变得未定义，并使其子构造函数不引用这些选择器。

这是一个Code Share因为我不想把所有东西都扔在这里。但有问题的 parent 是:

    var GameStartup = function() {
    this.welcomeStartBtn = document.querySelector('.game-startup__welcome a');
    this.welcomeStartBtn__controller = document.querySelector('.game-startup__welcome a span:first-child');
    this.welcomeStartBtn__copy = document.querySelector('.game-startup__welcome a span:last-child');
};

所以基本上我希望它的子 ShowLogin 和父级未定义或其他东西，以便它不再能够创建诸如分离的 dom 节点等之类的东西。

Answer 1

您可以做的一件事是使用 getter，如下所示:

function GameSartup () {}

GameSartup.prototype = {
    constructor: GameSartup,

    get welcomeStartBtn () {
        return document.querySelector('.game-startup__welcome a');
    }

    // more getters here
}

这样您可能会产生一些开销，因为每次“获取” DOM 元素时都会查询 dom，但您会按照要求删除所有引用。

如果这会使速度减慢太多，您可以为元素引用创建一个缓存，如下所示:

function GameSartup () {
    this.domcache = {};
}

GameSartup.prototype = {
     constructor: GameSartup,

    get welcomeStartBtn () {
        var selector = '.game-startup__welcome a';
        if (!this.domcache.hasOwnProperty(selector)) {
            this.domcache[selector] = document.querySelector(selector);
        }
        return this.domcache[selector];
    },

    // more getters here

    trash: function () {
        this.domcache = null;
        delete this.domcache;
    }
}

这样您可以一次释放所有引用，但您仍然需要手动清除缓存。但如果您像这样创建一个 GameSartup 对象:

var gs = new GameSartup();

及以后:

gs = null;

并且不存在对 gs 的其他引用，垃圾收集器会发现也不存在对 domcache 的引用，并将其删除。

更新

回复评论:

»缓存失效«始终是应用程序中的关键点，而缓存本身可能会变得复杂，并且是奇怪错误的来源。但它也可以真正加快速度。这取决于应用程序，这应该/必须有多复杂。

在这种情况下，我会在没有缓存的情况下开始，如果性能良好，则完成。

我认为下一步可能如上所述:在某些事件中立即清除整个缓存。该方法可能如下所示:

//you do not need to loop over the cache and set the values to undefinded
//the garbage collector will free memory
//as soon as there is no reference to a given object left
clearCache: function(){
    this.domcache = {};
    return this;
}

下一步是实现“每项缓存”，如下所示:

addToCache: function (key, value) {
    if (!this.domcache.hasOwnProperty(key)) {
        this.domcache[key] = value;
    }
    return value;
}

clearFromCache(key) {
    delete this.domcache[key];
    return this;
}

在添加项目后立即从缓存中清除项目是没有用的，因为这只是没有缓存加上管理它的开销。

总而言之，这取决于一系列因素，例如:

• 您需要多久查询一次元素，
• 该元素是否始终驻留在 dom 中，以便始终可以从 dom 查询它，
• 需要缓存多少元素，
• 需要多少代码才能正确缓存这些元素，
• dom中有多少个元素

如果有疑问，您应该在使用和不使用缓存的情况下进行一些基准测试，以找到有效的方法。

更新#2

既然你谈论了 DOM 元素 - 只要一个元素是 DOM 的一部分(有一个父节点) - 它就不会被垃圾收集器删除，因为有对其的引用(childNodes 数组中的项目)。

因此，如果您担心由于运行时创建的元素太多而导致内存泄漏，如下所示:

var elements = [];
for(var i = 0; i < 10000; i++) {
     var div = document.body.appendChild(document.createElement('div'));
     elements.push(div);
}

你必须做两件事:从 dom 中删除每个元素 elements[i] ，例如:

elements[i].parentNode.removeChild(elements[i]);

和

elements = null; //or a new array