JavaScript Object Literal表示法與普通函數和性能影響？

Question

假設我有以下功能：

function foo() {

}

function bar() {

}

我可以在上面寫為Object Literal表示法：

var Baz = {
  foo: function() {
  },
 bar: function() {
 }
};

據我所知，在后一種情況下，無論是否調用任何Baz函數，腳本加載時都會創建一個Baz實例。 在前一種情況下，僅在調用該函數時才創建函數對象。 我對這些假設是否正確？

如果我是正確的那么前者將具有比后者在很少調用這些函數的應用程序中更高的性能（更少的內存）。 但后者的優勢在於它提供了更大的模塊化和更低的全局命名空間污染。

您從專業經驗中對此有何看法？ 有速度差嗎？

Answer 1

在前一種情況下，僅在調用該函數時才創建函數對象。

不，無論如何都會創建這些功能。

請注意，您也可以這樣做：

function foo() {
}

function bar() {
}

var Baz = {
  foo: foo,
  bar: bar
};

或這個：

var Baz = (function() {
    function foo() {
    }

    function bar() {
    }

    return {
      foo: foo,
      bar: bar
    };
})();

將函數放在Baz作為屬性的主要目的是使它們在Baz上作為“方法”使用。 這可能是為了方便，“命名空間”等。在您的第一個表單（以及我上面的第一個表單）中，如果該代碼位於全局范圍，則foo和bar將添加到全局范圍，這可能會非常快速地擁擠（尤其是在瀏覽器上）。 在第二個示例中，唯一的全局符號是Baz因為函數是匿名的。 在上面的最后一個例子中，唯一的全局符號是Baz但函數不是匿名的，它們有調試器和堆棧跟蹤可以顯示的名稱（這是一件好事; 更多信息 ）。

在嘗試優化函數何時創建時，以下是它的工作原理：當執行進入給定的上下文 （全局上下文或與調用函數相關的上下文）時，這些事情就完成了：

1. 創建幕后執行上下文對象。
2. 創建該執行上下文的幕后變量對象 。
3. 在函數上下文的情況下：
   1. 將一個屬性添加到arguments的變量對象中（可用於訪問參數的類似數組的事物）
   2. 對於每個函數的命名參數，將使用參數的值將屬性添加到變量對象中
   3. 如果函數具有名稱，則將其名稱添加為變量對象的屬性，並具有函數對象的值。
4. 對於在執行上下文中用var聲明的每個變量，在變量對象上創建屬性; 它們的值最初是undefined （無論var上是否有初始值設定項）。
5. 處理上下文中的每個函數聲明 。 （函數表達式尚未處理;更多信息如下所示。）創建每個函數名的變量對象的屬性，並接收函數對象作為其值。
6. 逐步執行代碼。
   • 與所有表達式一樣，函數表達式在逐步流程中遇到時會被計算。
   • 具有初始值設定項的var語句（例如， var a = 2; ）與賦值語句（ a = 2; ）完全相同; 它的var方面早得多。 （ var 經常被誤解 。例如，我們昨天才提出這個問題 。）

您將注意到函數聲明和函數表達式之間的差異。 您可以通過查看是否將結果用作右手值來判斷哪個是哪個 - 也就是說，您是將結果分配給變量，將其用作對象中屬性定義的右側文字，或將其傳遞給函數。 如果你是，那就是一個函數表達式 。 如果你不是，那就是一個功能聲明 。

函數聲明示例：

function foo() {
}

函數表達式示例：

var foo = function() {
};

另一個：

var Baz = {
    foo: function() { }
};

（ foo行是對象文字中的屬性聲明，它使用函數表達式作為值。）

命名函數表達式示例：

var f = function foo() {  // <== Don't do this (more below)
};

命名函數表達式應該是有效的，但它們在野外（特別是IE）中的實現很難得到支持，因此現在必須避免它們。 更多這里 。