javascript - 管理 Javascript 内存中变量的最佳方法是什么

Question

我正在通过 Javascript 构建一个高度基于浏览器的网络应用程序。

当我需要一个位于单独文件中的模块时，我不知道这三种方法中哪一种最适合 javascript 引擎占用的内存:

思路一，在extend方法中赋值

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         this.collections.contact.each(function(model) {
             // do something with each model
         });

         this.collections.item.on('reset', this.resetItems, this);

         this.$el.remove().append(this.view.render().el);
    };

    jQuery.extend(true, ContactExample.prototype, {
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView,
        '$el': jQuery('#somediv'),
    }, ContactExample);

    return new ContactExample();
};

思路2，在实例化方法中赋值:

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         inst.collections.contact.each(function(model) {
             // do something with each model
         });

         inst.collections.item.on('reset', this.resetItems, this);

         inst.$el.remove().append(this.view.render().el);
    }

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample({
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView
    });
};

想法 3，只需在代码中使用它们，因为它们已经在函数范围内被引用:

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         ContactCollection.each(function(model) {
             // do something with each model
         });

         ItemCollection.on('reset', this.resetItems, this);

         this.$el.remove().append(ContactListView.render().el);
        }
    });

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample();
});

什么(以及为什么)是在 javascript 内存引擎中处理变量的最佳方式。

谢谢你的回答

Answer 1

三个选项中内存使用最少的是使用上下文变量(想法 #3)，因为它消除了重复。另外两个将值复制到在该函数内部创建的第二个对象。这是背景:

JavaScript 中的一切都是对象，对象在内部只是将字符串键与其实际值的引用相关联的 HashMap 。这包括普通的局部变量；在内部，它们是一个不可见的上下文对象的属性，可以被该函数和其中定义的任何函数访问。使用 $.extend 与直接分配属性没有区别，因为 extend 函数只是 for 循环的语法糖，将属性从一个对象复制到另一个对象。

由于函数的上下文(局部变量)对象被保留供其内部定义的所有函数使用，因此您的选项的最低内存使用量将是不会将其复制到新的内部对象的选项。但差异很小。

如果您真的想将内存使用量减少到最低水平并编写更易于维护的代码，我建议您摆脱花哨的(且难以调试的)上下文包装并以老式的方式对其进行编码JavaScript OOP 方式:使用在顶层定义的普通构造函数或在首次加载页面时仅运行一次的单个包装函数内定义的构造函数。这摆脱了重复的上下文。使用“new”关键字调用它，并将数据作为您分配给“this”的参数传递。在构造函数中进行初始化，仅此而已。

将所有方法函数放在其原型(prototype)上，然后将其用作普通、普通、简洁的 JavaScript 对象。

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript