管理Javascript内存中变量的最佳方式是什么

Question

我正在构建一个基于JavaScript的浏览器的Web应用程序。

当我需要位于分隔文件的模块，我不知道是哪三个方法是关于由JavaScript引擎所采取的内存最好：

理念1，分配变量的延伸方法在instanciation方法

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中的所有内容都是一个对象，对象在内部只是将字符串键与其实际值相关联的hashmaps。这包括普通的局部变量;在内部它们是一个不可见的上下文对象的属性，可以被该函数及其内部定义的任何函数访问。直接使用$ .extend和赋值属性没有区别，因为extend函数只是一个for循环的语法糖，它将属性从一个对象复制到另一个对象。由于一个函数的上下文（局部变量）对象被其中定义的所有函数保留以供其使用，所以选项的最低内存使用量将不会将其复制到新的内部对象中。但差别不大。

如果你真的想减少你的内存使用量到最小的水平，并编写易于维护的代码，我建议摆脱花式（和难以调试）的上下文环绕和编码旧的老式的JavaScript OOP方式：使用一个普通的构造函数，这个构造函数在顶层或者在一个包装函数中定义，这个函数在页面第一次加载时只运行一次。这摆脱了重复的上下文。使用'new'关键字调用它，并将数据作为您分配给'this'的参数传入。在构造函数中进行初始化，除此之外。

将所有的方法函数放在它的原型上，然后用它作为一个普通的普通的无装饰的JavaScript对象。

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

Answer 2

为什么你使用$ .extend？只需创建一个实例，并指定属性：

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

内存不会是一个问题 - 而不是集中在引用DOM元素（#somediv）以后可能会导致麻烦。

Answer 3

• 常量

  • 如果您不需要它们的功能范围之外，然后用正常变量。

  • 如果您需要它们超出函数的范围，则将它们放在构造函数中。

• 实例变量（每个实例变化）

  • 对于您知道将有每个实例不同的值，在构造函数中使用正确的类型声明它们的属性，使他们能够被优化成与构造函数关联的静态类型。

  • 对于在所有对象（如方法）之间共享的属性，请使用原型。

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