管理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

• 常量

  • 如果您不需要它們的功能範圍之外，然後用正常變量。

  • 如果您需要它們超出函數的範圍，則將它們放在構造函數中。

• 實例變量（每個實例變化）

  • 對於您知道將有每個實例不同的值，在構造函數中使用正確的類型聲明它們的屬性，使他們能夠被優化成與構造函數關聯的靜態類型。

  • 對於在所有對象（如方法）之間共享的屬性，請使用原型。

  • 對於更可能保持其默認值的屬性，如果您想要訪問速度，您應該在構造函數中聲明它們，但如果要使用更少的內存，則應該將默認值放在構造函數中並且只有在對象與默認值不同時才添加屬性。