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

What is the best way to manage variable in memory for Javascript

本文关键字：最佳 方法 是什么 变量 Javascript 管理 内存      更新时间：2023-09-26

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

当我需要一个模块位于一个分离的文件，我不知道这三种方法中哪一种是最好的关于javascript引擎采取的内存:

Idea 1， 在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();
};

Idea 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内存引擎中处理变量的最好方法是什么(以及为什么)。

感谢您的回答

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

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

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

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

把你所有的方法函数放在它的原型上，然后把它当作一个普通的、普通的、没有花哨的JavaScript对象来使用。

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

为什么使用$。延伸吗?只需创建一个实例并分配属性:

var c = new ContactExample();
c.$el = $('#somediv');

内存不是问题-而是关注对dom元素(#somediv)的引用，这可能会在以后引起麻烦。

  • 常量

    • 如果在函数作用域之外不需要它们，则使用普通的变量。

    • 如果你需要在函数的作用域之外使用它们，那么把它们放在构造函数中。

  • 实例变量(随每个实例而变化)

    • 对于那些你知道在每个实例中会有不同值的属性，在构造函数中用适当的类型声明它们，这样它们就可以被优化成与构造函数相关联的静态类型。

    • 对于在所有对象之间共享的属性(如方法)，使用原型

    • 对于那些更有可能保持默认值的属性，如果你想要访问速度，你应该在构造函数中声明它们，但是如果你想要使用更少的内存，你应该把默认值放在构造函数中，只有当它与默认值不同时才添加属性到对象中。

相关文章：